[快速入门前端 34] 进阶样式属性 (4)：Animation 动画

Animation 动画

前面我们讲完了 transition，这边来讲一个进阶的概念 —— Animation (动画)，在前面转场效果中，主要是设定因事件触发元素显示方式改变过程中的转场效果，而动画则会在每次网页刷新时自动开始 (不需以事件触发)。在细节呈现上，animation 利用关键影格(keyframes) 也可以做到比 transition 更详细的样式设定。
keyframes (关键影格)，又称关键帧，是指当一物体连续运动时，可以以几个关键的位置表示整个运动的轨迹，而这几个关键位置就称为 keyframes。
如下图，在一球体进行抛物运动时，keyframes 为开始点、转折点、以及结束点，keyframes 越详细，则观看体验会越顺畅。

[图源自网路]

keyframes

keyframes 是呈现动画效果的重要部分，也是一个规则组，里面可以定义多个关键帧，让网页知道在什么时间元素应该做什么事情，有点像我们在 CSS 中自己定义一个动画让元素套用。
keyframes 的写法有两种，如下：

第一种：指定义开头和结尾

@keyframes 自订名称 {    from { /* 元素开始动画时 */        /* 里面可以定义各种 CSS，例如位置、位移、元素颜色、大小等 */    }    to { /* 元素结束动画时 */        /* 里面可以定义各种 CSS，例如位置、位移、元素颜色、大小等 */    }}

第二种：按照百分比做更详细的定义

@keyframes 自订名称 {    0% { /* 0% 时 */        /* 里面可以定义各种 CSS，例如位置、位移、元素颜色、大小等 */    }    50% {        /* 可定义多个关键帧*/    }    100% { /* 100% 时 */        /* 里面可以定义各种 CSS，例如位置、位移、元素颜色、大小等 */    }}

keyframes 的名称与元素无关keyframes 的名称不可重複

Animation 常用属性

animation-name
必要属性，指定动画要套用哪一组 keyframes，属性值为我们自订的 keyframes 名称。

animation-duration
必要属性，指定动画所需的时间，单位为 s 或 ms。

animation-delay
指定延迟多久才开始动画，单位为 s 或 ms。

animation-timing-function
与 transition-timing-function 功能相同，主要用来指定动画的速度曲线。
属性值：ease、linear、ease-in、ease-out、ease-in-out、贝兹曲线、steps()
setps 是指「将整个动画分为几步」，若 steps(20)，就代表将 0% 到 100% 分为 20 布，则元素会像逐格动画般慢慢往前跳。

animation-iteration-count
指定动画播放的次数，属性值为数字或 infinite (无限次)。

animation-direction
动画方向，不是指向左向右的物理方向，而是指动画是由 0% 到 100%，还是由 100% 返回 0%。属性值有 normal (预设为 0 -> 100)、reverse (反方向)、alternate (交替，正反正反...)、alternate-reverse (反方向交替，反正反正...)。

animation-fill-mode
指定非动画时的状态，也就是动画播放前后元素的状态，预设为回到初始原点，属性值包含 forwards 和 backwards 将状态设定与开始时及结束时相同。

animation-play-state
可以设定动画播放或暂停，通常用于某事件触发后，例如滑鼠悬停时停止动画。
属性值：running (预设)、paused (暂停)

範例：如何定义一个简单的动画

下面是原本的元素，我们想要让他在页面重整时从原本的位置往右下方移动。

.box {    height: 200px;    width: 200px;    background-color: rgb(150 240 240);}

要让元素呈现动画的效果，我们必须定义一组关键帧，这边需要用到刚刚说的 @keyframes。

@keyframes moveToDown { /* keygrames 的名称可以随意取 */    from{        /* 这边因为元素初始状态就是原本 .box 中的样式状态，所以 from 这边可以空白 */    }    to{        transform: translate(400px, 100px); /* 指定最后位移 400px, 100px */    }}

再来我们需要让元素的动画套用到写好的 keyframes，所以需要在原有的 CSS code 中加入 animation-name: 刚刚写好的 Keyframes，除此之外 animation-duration 也是动画的必要属性，这样一个简单的动画就完成了。

.box {    height: 200px;    width: 200px;    background-color: rgb(150 240 240);    animation-name: moveToDown;    animation-duration: 2s;}

Animation 複合属性

animation 也可以写成複合属性，语法为：

animation: name duration timing-function delay iteration-count direction fill-mode;animation: moveToDown 3s ease 1s 3 alternative forwards;

虽然 animation-play-state 也可以写在複合属性 animation 中，但因为写了之后整个动画就会暂停，所以通常我们会另外写在事件中。

Transition 和 Animation 的差别

属性transitionanimation说明转场效果，强调元素在 transform 间的过渡动画触发需要利用事件触发，例如滑鼠悬停、点击等不需要特别触发细节只关注于元素转变前和转变后之间的过渡可以利用 keyframes 设定多个关键帧的细节搭配属性元素需要有 transform 才可加入 transition，简而言之就是要先有改变才能加入转场的过渡效果元素可以直接套用一个完整的动画 ( 需搭配设定好的 keyframes )

---

上一篇：[快速入门前端 33] 进阶样式属性 (3)：3D Transform 和 Transition 转场效果
下一篇：[快速入门前端 35] Flex Box 弹性盒子
系列文章列表：[快速入门前端] 系列文章索引列表