动画和过渡类似,都可以实现动态效果,不需要某个属性值就可以触发
设置关键帧@keyframes 设置{}名字
注意:
帧的顺序可以更改,如果初始值不写,默认值是初始值,结束值不写,默认值还是初始值
可以同时设置关键帧,用,隔开
执行动画的过渡方式
animation-name(必填)
animation-duration(必填)
animation-timing-function 过渡变化曲线(选填)
ease 默认值,慢速开始,先加速后减速
liear 匀速运动
ease-in 先慢后快 加速运动
ease-in-out 以慢速开始和结束
ease-out 先快后慢减速运动
septs() 分布执行
animation-delay 动画延迟时间
animation-iteration-count 动画播放执行的次数
infinite 动画无限执行
animation-direction 轮流反方向动画,设置动画开始的位置
normal 默认值从from到to
reverse 从to到from
alternate 从from到to,重复执行动画反方向执行
animation-fill-mode 动画执行停止时,动画停止的位置
none 元素回到初始位置
forwards 停在动画结束的位置
backwards 动画延迟等待时,元素就会处于开始位置
animation-play-state 当前是否要暂停
ruuning 动画执行
paused 动画暂停
animation可以简写