css学习记录十七：动画

一、什么是动画

• 动画可以设置多个节点来控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多的变化，更多的控制，连续自动播放等。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

二、动画步骤

1.先定义动画

@keyframes 动画名称  {
  0%{
     width :100px
}
100%{
    widt:200px
}

}

０表示动画的开始，100％表示动画的完成，这样的规则叫动画序列。
＠keyframes 中规定某些ｃｓｓ样式，就能创建由当前样式逐渐改变为新样式的动画
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以任意改变多的样式或任意多的次数
动画的节点可以使用百分比来表示或者from和to，等同于0％和100％,百分比就是时间的划分，百分百*时间，表示多长时间到那个点
百分百需要是整数

2.调用动画

div{
     width:200px;
     height:200px;
     background-color:red;
     margin:10px;
     animation-name:动画名称;
     animation-duration:持续时间,单位是s;
}

一个元素可以的定义多个动画

animation:move 1s,move2 3s
/*用逗号隔开即可*/

三、动画的常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-plat-state属性
animation -name	规定@keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0，必须的
animation-timing-function	规定动画的速度曲线，默认是’ease’
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是’normal’,'alternate’逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是’running’,还有’pause’
animation-fill-mode	规定动画结束后状态，保持此位置是forwoards，回到起始位置是backwards

四、动画属性简写

按顺序来写

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束的状态
animation： move     5s     linear   2s    infinite alternate  forwards;

• 简写的属性里面不写动画的animation-play-state，animation-play-state动画的暂停后开始经常和鼠标经过等方式配合使用。
• 想要动画走回来，而不是跳回来，使用 animation-direction：alternate
• 盒子动画结束后，停在结束位置： animation-fill-mode ：forwoards
• 暂停动画：animation-play-state: puased; 窗体给弄乱了，怎么办

五、动画速度调节

animation-timing-function属性来控制动画的速度

值	描述
linear	动画从头到尾的速度是相同的，匀速的
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）

步长就是动画分几步来完成。动画就不要在写ease和linear了