为啥有这个animation？

目的：解决transition的不足；

• 可以循环播放
• 可以不需要事件触发就可以播放
• 可以设置动画的中间过程，就是说一个动画可以按帧设置

思考以下几个问题，你会学的更快

• 动画叫啥名称？ animation-name
• 动画如何动？ 我们用函数去模拟，animation-timing-function
• 动画动多长时间？ 我们定义一个时间量 以秒或者毫秒为单位 animation-duration
• 动画是否立即开始？我们给动画定义一个延时时间，默认值0
• 动画当前的状态？默认就是运行中 animation-play-state
• 动画是否可以循环播放？ 我们可以设置动画运行多少次或者无限的循环；
• 动画循环播放后，该回到哪里继续开始？ animation-fill-mode

基本语法

• animation属性, 是六个动画属性的简写

animation-name：动画名称

animation-duration：规定完成动画所花费的时间，以秒或毫秒计

animation-timing-function：规定动画的速度曲线。参考：transition（过渡）? animation-2、delay：规定动画延迟时间animation-iteration-count：规定动画应该播放的次数
语法：animation-iteration-count: n|infinite;
n：定义循环数值infinite：无线循环animation-direction：规定是否应该轮流反向播放动画
normal: 默认值alternate:反向轮回JavaScript 语法：
object.style.animation=“none 0 ease 0 1 normal” 默认值

animation-play-state属性
语法：animation-play-state paused | running可以让动画突然终止
例如鼠标获取立即终止动画等场景规定动画正在运行还是暂停默认值：runningJavaScript 语法：
object.style.animationPlayState="paused"

animation-fill-mode属性
属性规定动画在播放之前或之后，其动画效果是否可见语法：animation-fill-mode : none | forwards | backwards | both;
forwards：动画结束后保持最后帧效果，是@keyframes定义的100%状态backwards：回到最初状态，不是@keyframes定义的0%状态both：效果同forwardsnone：效果同backwardsJavaScript 语法
object.style.animationFillMode=none 默认值

动画事件

作用：在动画的开始、结束、或者动画再次循环时处理一些自特殊业务；

animationstart ：CSS 动画开始后触发

animationend ：CSS 动画动画结束时触发

animationiteration ：CSS 动画重复播放时触发，执行次数N-1
注意：如果 动画重复10次，这个函数触发9次，如果动画为1次，这个函数不会触发elapsedTime：截至到现在的时间

@keyframes规定

animation动画帧css写法
@keyframes mymove{0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}}JavaScript 语法动态改变
学习：@https://www.jianshu.com/p/b7b347c9783e
单独一个样式文件js添加修改样式表要注意兼容问题：重新刷新animation值 学习：https://blog.csdn.net/qq_40776187/article/details/85262210

transform使用 @keyframes
这个属性不一定要在animation中使用也是有效果的属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜不会改变其它元素的位置缩放：transform scale(x,y,z)
xyz 不一定都要写坐标系满足左手定义原则