CSS3之animation动画

# `@keyframes`

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
`animationname`	必需的。定义`animation`的名称。
`keyframes-selector`	必需的。动画持续时间的百分比。合法值：0-100% from (和0%相同) to (和100%相同)注意：您可以用一个动画`keyframes-selectors`。
`css-styles`	必需的。一个或多个合法的`CSS`样式属性

应用

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# `animation` 语法

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

值	说明
`animation-name`	指定要绑定到选择器的关键帧的名称
`animation-duration`	动画指定需要多少秒或毫秒完成
`animation-timing-function`	设置动画将如何完成一个周期
`animation-delay`	设置动画在启动前的延迟间隔。
`animation-iteration-count`	定义动画的播放次数。
`animation-direction`	指定是否应该轮流反向播放动画。
`animation-fill-mode`	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
`animation-play-state`	指定动画是否正在运行或已暂停。
`initial`	设置属性为其默认值。
`inherit`	从父元素继承属性。

# animation 属性

# animation-timing-function

animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。用于设置动画效果的过渡效果，如匀速动画、加速动画等。

语法

animation-timing-function: value;

值	描述
`linear`	线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
`ease`	平滑过渡。动画以低速开始，然后加快，在结束前变慢。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
`ease-in`	由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
`ease-out`	由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
`ease-in-out`	由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
`cubic-bezier(n,n,n,n)`	在 `cubic-bezier` 函数中自己的值。可能的值是从 0 到 1 的数值。
steps(n, `<jumpterm>`)	显示沿过渡沿n个停靠点的动画迭代，并在相等的时间长度内显示每个停靠点。

# steps()

简要来说，steps()功能符可以让动画不连续。

语法

steps()简化出了step-start和step-end这两个关键字；

animation-timing-function: steps(number,jump-start | jump-end | jump-none | jump-both | start )

值	描述
`number`	表示把动画分成多少段；
`jump-start`	表示一个左连续函数，以便在动画开始时发生第一跳；
`jump-end`	表示一个右连续函数，以便在动画结束时发生最后一次跳转；
`jump-none`	两端均无跳跃。而是同时保持0％和100％的标记，每个标记持续时间的1 / number。
`jump-both`	包括在0％和100％标记处的暂停，有效地在动画迭代过程中添加了一个步骤。
`start`	与相同`jump-start`。
`end`	与相同 jump-end。

简要概括就是：

start：表示直接开始。也就是时间才开始，就已经执行了一个距离段。于是，动画执行的5个分段点是下面这5个，起始点被忽略，因为时间一开始直接就到了第二个点：

start执行的关键点

end：表示戛然而止。也就是时间一结束，当前距离位移就停止。于是，动画执行的5个分段点是下面这5个，结束点被忽略，因为等要执行结束点的时候已经没时间了：

end执行的关键点

step-start和step-end

step-start和step-end是steps()功能符简化关键字。

step-start等同于steps(1, start)，step-end等同于steps(1, end)或者steps(1)。

效果

# animation-iteration-count

它有两个值：

n 定义播放多少次动画
infinite 无限次轮回播放

# animation-direction

animation-direction 属性定义是否循环交替反向播放动画。

语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

# animation-fill-mode

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	动画关键帧100%时，也就是动画结束时的状态。
backwards	动画关键帧0%时，也就是动画刚开始时的状态。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

示例：

当动画效果结束时，让box停留在终点位置。

# animation-play-state

animation--play-state属性指定动画是否正在运行或已暂停。

它有两个值：

paused 暂停动画
running 运行动画

# 使用animation实现动画效果

素材：

代码示例：

#box {
    width: 180px;
    height: 300px;
    background: url(./images/animation.png);
    margin: 100px auto;
    animation: imgMore 1s step-start infinite;
}
@keyframes imgMore {
    0% {
        background-position: 0 0;
    }

    14.3% {
        background-position: -180px 0;
    }

    28.6% {
        background-position: -360px 0;
    }

    42.9% {
        background-position: -540px 0;
    }

    57.2% {
        background-position: -720px 0;
    }

    71.5% {
        background-position: -900px 0;
    }

    85.8% {
        background-position: -1080px 0;
    }

    100% {
        background-position: -1260px 0;
    }
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

效果：

在GitHub上编辑

#css

上次更新: 2/23/2022, 5:36:03 PM

← CSS3之transform CSS3 filter 和 backdrop-filter→