前端-动画

补间动画

动画使用:

1.设定动画

@keyframes  动画名称{
开始状态:from{}
结束状态：to{}
}

注意：单个动画是from和to，多个动画用0%和100%

2.引用动画

animation-name：动画名称；

animation-duration：2s;

谁使用给谁

动画属性：

animation-name：动画名称；

animation-duration：2s;

运动曲线：animation-timing-function：linear（匀速）或者ease;

何时开始：animation-delay:1s;(一秒后开始)

重复次数：animation-tieration-count：infinite;(无限循环)

是否反向播放：animation-direction:normal；(默认值)或者alternate(反向播放)

结束位置：animation-fill-mode:backwards(默认值，回到起始位置)或forwards(停留在结束位置)

暂停：animation-play -state:running(默认值)或paused(暂停)搭配：hover使用

动画简写属性：

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向播放 动画结束状态；

例：animation：move 1s linear 2s infinite alternate;

                          名字  持续时间  匀速   何时开始 无限循环 反向播放

逐帧动画

语法：animation-timing-function:steps(数字)有多少帧写多少数

如果有两个动画记得用逗号隔开

例如：animation：补间动画，逐帧动画