css动画

前言：

动画（animation）是css3得特征之一，可以通过设置多个节点来精准控制一个或一组动画；常来实现复杂的动画效果

相较于过度，动画可以实现更多的变化，更多控制，连续自动播放等效果

制作动画分为两步：

1.定义动画

2.调用动画

目录

1.定义动画

2.动画的调用

动画的一些属性

速度曲线的细节

由于不能用视屏演示还请见谅

---

---

1.定义动画

用@keyframes定义动画名称

语法：

@keyframes name {
 0% {}
 100% {}
}

name是我们自己定义的动画名

动画序列

• 0%是动画的开始，100%是动画的结束 ，这样的规定是动画序列
• 在@keyframes中规定某项css样式就能创建由当前样式逐渐改变为新样式的动画效果
• 动画是使元素从一样式逐渐变化为另一种样式的效果，您可以设置任意多的次数（0%，1%，10%，100%....）  
• 请用百分比来规定变化的时间，或者用关键词“from”和“to”等同于0% 和100%  这里面的比分比是指时间的划分 即占了总时间的百分之几

2.动画的调用

例如：

div {
 width: 200px;
 height: 200px;
 animation-name: name;
 animation-duration: 2s;
}

动画的一些属性

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放(默认)、向后播放 alternate。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在播放动画结束时的状态 保持现状forwards 回到起点 backwards
animation-iteration-count	规定动画应播放的次数。默认1次 无限循环infinite
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行(running)还是暂停(pause)。
animation-timing-function	规定动画的速度曲线。默认 ease

动画属性的简写

 animation：动画名 持续时间 速度曲线  延迟 播放次数  是否反向 结束状态；

如： animation：name 5s linear 0.5s infinite normal forwards;

：简写属性是不包含 animation-play-tate

速度曲线的细节

animation-tiing-function规定动画的速度曲线

 在以上速度曲线的基础上还新增加 steps 步数

就是将动画均分为几步

 *一个元素可以添加多个动画，不同动画之间用逗号“，“连接

由于不能用视屏演示还请见谅