CSS3之animation属性

CSS中的animation属性可用于为许多其他CSS属性设置动画，例如颜色，背景色，高度或宽度。每个动画都需要使用@keyframes这种at-rule语句定义，然后使用animation属性来调用它，如下所示：

.element {

  animation: pulse 5s infinite;

}

@keyframes pulse {

  0% {

    background-color: #001F3F;

  }

  100% {

    background-color: #FF4136;

  }

}

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>

    <style>

        .element {

            width: 100%;

            height: 100%;

            animation: pulse 5s infinite;

        }

        @keyframes pulse {

            0% {

                background-color: #001F3F;

            }

            100% {

                background-color: #FF4136;

            }

        }

        html,

        body {

            height: 100%;

        }

    </style>

</head>

<body>

    <div class="element"></div>

</body>

</html>

每个@keyframes的 at-rule CSS语句规则都定义了在动画过程中的特定时刻应该发生的情况。例如，0%是动画的开始，而100%是动画的结束。可以通过简写animation属性或它的八个子属性控制这些关键帧，以更好地控制应该如何操纵这些关键帧。

子属性

animation-name：声明要操纵的@keyframes规则的名称。

animation-duration：动画完成一个周期所需的时间。

animation-timing-function：建立预设的加速曲线，例如缓动或线性。

animation-delay：加载元素到动画序列开始之间的时间。

animation-direction：设置循环后动画的方向。其默认值在每个周期重置。

animation-iteration-count：应该执行动画的次数。

animation-fill-mode：设置在动画之前/之后应用的值。

例如，您可以将动画的最后状态设置为保留在屏幕上，或者可以将其设置为切换回动画开始之前的状态。

animation-play-state：暂停/播放动画。

可以如下面所示使用这些子属性：

@keyframes stretch {

  /* 这里声明动画动作 */

}

.element {

  animation-name: stretch;

  animation-duration: 1.5s;

  animation-timing-function: ease-out;

  animation-delay: 0s;

  animation-direction: alternate;

  animation-iteration-count: infinite;

  animation-fill-mode: none;

  animation-play-state: running;

}

/* 等同于*/

.element {

  animation:

    stretch

    1.5s

    ease-out

    0s

    alternate

    infinite

    none

    running;

}

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>

    <style>

        .element {

            height: 250px;

            width: 250px;

            margin: 0 auto;

            background-color: red;

            animation-name: stretch;

            animation-duration: 1.5s;

            animation-timing-function: ease-out;

            animation-delay: 0;

            animation-direction: alternate;

            animation-iteration-count: infinite;

            animation-fill-mode: none;

            animation-play-state: running;

        }

        @keyframes stretch {

            0% {

                transform: scale(.3);

                background-color: red;

                border-radius: 100%;

            }

            50% {

                background-color: orange;

            }

            100% {

                transform: scale(1.5);

                background-color: yellow;

            }

        }

        body,

        html {

            height: 100%;

        }

        body {

            display: flex;

            align-items: center;

            justify-content: center;

        }

    </style>

</head>

<body>

    <div class="element"></div>

</body>

</html>

以下是这些子属性中每个属性可以采用的值的完整列表：

animation-timing-function	ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration	Xs or Xms
animation-delay	Xs or Xms
animation-iteration-count	X
animation-fill-mode	forwards, backwards, both, none
animation-direction	normal, alternate
animation-play-state	paused, running, running

多个步骤

如果动画具有相同的开始和结束属性，则在@keyframes中用逗号分隔0%和100%值很有用：

@keyframes pulse {

  0%, 100% {

    background-color: yellow;

  }

  50% {

    background-color: red;

  }

}

多个动画

您也可以用逗号分隔值，以在选择器上声明多个动画。在下面的示例中，我们想在@keyframe中更改圆的颜色，同时还要将其与另一边左右轻轻一碰。

.element {

  animation:

    pulse 3s ease infinite alternate,

    nudge 5s linear infinite alternate;

}

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>

    <style>

        .element {

            height: 400px;

            width: 400px;

            background-color: red;

            animation:

                pulse 3s ease infinite alternate,

                nudge 5s linear infinite alternate;

            border-radius: 100%;

        }

        @keyframes pulse {

            0%,

            100% {

                background-color: red;

            }

            50% {

                background-color: orange;

            }

        }

        @keyframes nudge {

            0%,

            100% {

                transform: translate(0, 0);

            }

            50% {

                transform: translate(150px, 0);

            }

            80% {

                transform: translate(-150px, 0);

            }

        }

        html,

        body {

            height: 100%;

        }

        body {

            display: flex;

            align-items: center;

            justify-content: center;

        }

    </style>

</head>

<body>

    <div class="element"></div>

</body>

</html>

性能

对大多数属性进行动画处理是性能方面的考虑，因此在对任何属性进行动画处理之前，我们应谨慎行事。但是，可以安全地对某些组合进行动画处理：

transform: translate()

transform: scale()

transform: rotate()

opacity

哪些属性可以设置动画?

MDN有一个可以设置动画的CSS属性列表。可设置动画的属性倾向于颜色和数字。不可动画属性的一个示例是背景图像。