[TOC] # 动画介绍  ## 动画使用 keyframes { } 1.定义动画  动画序列  2.使用动画  ## 动画理论 | 定义 | 使用 | | --- | --- | ## 动画多个变化  定义 /\* 1.可以做多个状态的变化keyframe 关键帧\*/ /\* 2.里面的百分比要是整数\*/ /\* 3.里面的百分比就是总的时间(我们这个案例10s)的划分 25% \* 10=2.5s\*/ |  | 调用 | | --- | --- | 动画属性  ~~~ 属性 描述 @keyframes 规定动画。 animation 所有动画属性的简写属性,除了animation-play-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 规定动画结束后状态，保持forwards回到起始backwards ~~~ ## 属性运用  ## 鼠标点击自动停止  ## 动画简写属性 animation :动画名称  持续时间  运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;  ## 注意事项  ## 速度曲线细节  ## 速度曲线细节