动画

animation

定义动画：

@keyframes 定义类名 {
    from {}
    to{}
}
或者
@keyframes 定义类名 {
    0%{}
    ...
    100%{}
}

定义类名：

animation-name:自定义类名;

动画持续时间：

animation-duration:秒;

动画延迟时间播放：

允许负值，负值表示已经播放了几秒的状态开始播放

animation-delay:秒;

动画运行次数

animation-iteration-count:整数；
animation-iteration-count：infinite;（无限循环）；

动画运行方向

动画向前播放，默认值

animation-direction:normal;

动画以反方向播放

animation-direction:reverse;

动画先向前播放，然后向后播放

animation-direction:alternate;

动画先倒放，然后正常播放

animation-direction:alternate-reverse;

指定动画的速度曲线

指定慢速开始，然后加快，然后缓慢结束的动画，默认值

animation-timing-function:ease;

匀速动画

animation-timing-function:linear;

慢速开始的动画

animation-timing-function:ease-in;

慢速结束的动漫

animation-timing-function:ease-out;

开始和结束都慢的动画

animation-timing-function:ease-in-out

动画的填充模式

默认值

animation-flle-mode:normal;

元素将保留在最后一个关键帧设置的样式

animation-fill-mode:forwards;

元素将获取第一个关键帧设置的样式

animation-fill-mode:backwards;

元素将保留第一个关键帧和最后一个关键帧设置的样式

animation-fill-mode:both;

动画暂停和运行

暂停

animation-play-state:paused;

运行

animation-play-state:running;

动画复合属性

animation:name duration delay iteration-count direction play-state fill-mode timing-function