CSS动画

发表于 2020-01-30 分类于笔记

前言

总体上来说，animation的效果比transition的效果更加丰富和可控；有一些动画属性实际上是和渐变里面的效果是一致的；

animation属性

同transition一样，animation属性也是一个缩写属性，实际上是由多个动画属性组成的：

动画属性	作用	取值
`animation-name`	动画的名称，用`@keyframes`进行声明	`<string>`
`animation-duration`	动画的周期单位为`s`或`ms`，整数部分为`0`时可以不写	`<time>`
`animation-delay`	动画的延迟，可以为负值负值可以使得动画在一开始就处于某一个中间状态	`<time>`
`animation-timing-function`	动画的缓动函数	`<timing-function>`
`animation-iteration-count`	动画运行次数，默认为`1`	`<number>` `<time>` `infinite`：一直播放
`animation-direction`	动画运行方向从起点到终点状态的方向	`normal`：每个周期结束后重置为初始状态；默认值 `reverse`：每个周期都从结束状态开始，开始状态结束；周期结束后重置为结束状态；缓动函数也相应反转； `alternate`：往返运动；即每次周期结束后反转一次运动方向，第一次方向为`normal`； `alternate-reverse`：同`alternate`类似，只是第一次方向为`reverse`；
`animation-fill-mode`	动画执行开始前和执行结束后的样式表现	`none`：开始前和结束后不会应用动画里面的样式，默认值 `forwards`：动画执行结束后会保持最后一帧的样式；要注意这里指的最后一帧并不一定是动画定义的最后一帧，因为`animation-direction`可以改变动画运行的方向！ `backwards`：同理，动画执行前会保持第一帧的样式； `both`：`forwards` + `backwards`；
`animation-play-state`	动画的运行状态可以控制动画的暂停和运行	`running`：正在运行； `paused`：暂停运行；

@keyframes

@keyframes可以声明一个动画，该动画由多个关键帧组成，每个关键帧下是当前帧动画所表现的样式（这里的样式只能使用支持动画效果的属性）；声明格式如下：

@keyframes animationName {
    frame1 {
        /* 当前帧样式 */
    }
    /* ... */
    frameN {
        /* 当前帧样式 */
    }
}

关键帧的名称是一个时间进度值，取值如下：

from：相当于0%；动画周期的开始；
to：相当于100%；动画周期的结束；
%：百分比，百分比相对于一个动画周期的时间；

因此，动画实际上就是根据缓动函数以及关键帧的样式来进行插值（补帧），得到每一帧的样式。

animation事件

事件名称	触发时机
`animationstart`	动画开始执行的时候
`animationend`	动画执行结束的时候
`animationiteration`	动画每个周期（除了第一次）开始的时候

扩展

Web Animations API

Web Animations API是专门用来控制DOM的animation效果的一套API，通过这套API
可以直接使用js动态来设置动画效果；不过目前这套API的兼容性比较差，只有element.animate()方法还能用用；

20200130133645

前言

animation属性

@keyframes

animation事件

扩展

Web Animations API

参考文档