动画模块
过渡模块和动画模块的异同
不同点
- 1.过渡模块需要人为触发（例如hover）才会执行动画 --- 过渡三要素（①有属性发生变化②哪个属性发生变化③持续时间）
- 2.动画模块不需人为触发就可以执行动画
相同点
- 1.过渡和动画都是可以给元素添加动画
- 2.过渡和动画都是系统新增的一些属性
- 3.过渡和动画都需满足三要素才会出现动画
动画三要素
- 1.告诉系统需要执行哪个动画
- 2.告诉系统我们需要自己创建一个名叫move的动画
- @keyframes move{
from{margin-left:0;}
to{margin-left:500px;}
}
- from...to以外还可以指定百分比1% 50%...
- 3.告诉系统动画持续的时长
动画属性
- animation-delay:2s --- 动画延迟多少秒执行动画
- animation-timing-function:linear --- 动画执行的速度
- animation-iteration-count:3 --- 动画执行次数
- animation-direction --- 动画是否可以往返执行：normal（执行完回到起点，默认取值）和alternate
- animation-play-state：---- 动画执行状态：running（动画执行中，默认），paused（暂停）
动画状态---可以通过创建动画百分比显示
- 1.等待状态
- 2.执行状态
- 3.结束状态
- animation-fill-mode：指定动画等待状态和结束状态的样式----了解
- none：不做任何改变
- backwards：让元素等待状态的时候显示动画第一帧的样式
- forwards：让元素结束状态保持动画最后一帧的样式
- both：backwards+forwards
动画连写格式
- animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 是否往返动画
- 简写
练习--云层移动
- 1.多弄几个li做背景
- 不同的li中的云层背景宽度不一样---为了让其移动
速度不同
- 改变margin-left变大，运动距离变大则时间相同时速度就不一样
- 2.设置不同的动画
- 默认移动往右移动，所以背景图片宽度不够时左侧会显示空白
- 解决办法：增大li的宽度增加一倍，改变移动方向margin-left的正负性
练习--无限滚动
- 1.如想显示几张图片，则后面要多添加初始时候显示的li的图片这样切换的时候是一样的图片就不会发觉已经切换了
- 2.鼠标放到图片上时候，停止动画，并且所选图片正常显示，其余图片显示一个毛玻璃效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动banner</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 200px;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
border: 1px solid #000;
}
ul{
width: 3000px;
height: 200px;
animation: scrollImg 15s linear 0s infinite;
background-color: black;
}
ul:hover{
animation-play-state: paused;
}
ul:hover li{
/*将所有图片的添加毛玻璃*/
opacity: 0.6;
}
ul li:hover{
/*哪个li被hover哪个li就取消毛玻璃效果*/
opacity: 1;
}
@keyframes scrollImg {
from{
margin-left: 0;
}
to{
margin-left: -1600px;
}
}
ul li{
list-style: none;
float: left;
width: 200px;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>