animation 动画

Posted 2021-01-01 zhangyongxi

分两步:
[email protected]  动画的名称{
    0%{}   开始帧 0% = from
    50%{}  中间帧
    100%{}  结束帧 100% = to
}
2.通过animation的八大属性去调用上面规定的动画名称以及其他的属性
简写: animation: 1 2 3 4 5 6 7 8;

1)animation-name 动画的名称
2)animation-duration 动画持续的时间 - 时间越长 越慢 反之越块
3)animation-timing-function 动画的运动曲线
ease  匀速
ease-in  由慢到快的过程
ease-out 由快到慢的过程
ease-in-out  由慢到快 再到慢的过程
steps()
4)animation-delay 动画的延迟时间
5)animation-interation-count  动画运动的次数 默认1次 infinite无限次
6)animation-direction 动画的运动方向
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
7）animation-play-state 动画的运动的状态
运动  playing
暂停  paused
8）animation-fill-mode 动画运动结束之后保留的状态
保留在开始状态: backwards
保留在结束状态: forwards
保留在开始/结束 状态both