①我们要想实现动画的效果,首先需要定义一个动画
key:关键;frame:帧;
动画定义keyframes属性名处于实验阶段需要书写前缀
可以使用from和to 声明动画
from表示开始帧
to 表示结束帧
1/*定义动画*/
2@-webkit-keyframes donghua {
3 /*开始状态在from*/
4 from {
5 transform: translate(20px,20px);
6
7 }
8 /*结束状态 to from 和 to 属性需要一一对应*/
9 to {
10 width: 600px;
11 transform: translate(100px,200px);
12 }
}
② 实现一个动画的第二步就是调用动画了
animation:动画
animation的参数:
第一个参数:所调用动画的名称
第二个参数:动画完成一次的时间,单位是s,不能省略
第三个参数:缓冲描述 linear ease 贝塞尔曲线
第四个参数:延迟时间,单位是s,不可以省略,只针对第一次动画
第五个参数:动画的次数。如果自动补全反方向动画,也算次数。无限次:infinite
第六个参数:自动补全反方向动画 alternate
第七个参数:保存最后一帧的状态 forwards
我们除了使用 from和to 来定义动画之外,我们还可以使用百分比来定义动画,这样定义的动画可以调试的更加平滑。
百分比定义动画:表示在该时间动画达到的状态
0% 表示开始状态
100% 表示结束的状态
/*定义动画*/
@-webkit-keyframes donghua1 {
0% {
width: 200px;
background-color: lightblue;
}
20% {
width: 500px;
background-color: red;
}
60% {
width: 300px;
background-color: blue;
}
100% {
width: 700px;
background-color: green;
}
}
//每到达一个百分比时间点,这个元素就会变化成你定义的属性值,这里的百分比时间点是相对于你设置的动画完成一次的时间
鼠标进入停止动画播放:
-webkit-animation-play-state:paused;
state:状态;paused:暂停;
设置盒子元素的透明度:opacity:0.5; opacity属性值0 ~1之间,