CSS3 动画

Created: October-16, 2018

CSS3 动画功能允许你创建关键帧动画。

创建 CSS3 动画

在上一章中，你已经了解了如何通过 CSS3 过渡功能执行简单动画，例如将属性从一个值设置为另一个值。但是，CSS3 过渡几乎无法控制动画随时间推移的进展。

CSS3 动画更进一步使用基于关键帧的动画，允许你将 CSS 属性随时间的变化指定为一组关键帧，如 flash 动画。创建 CSS 动画是一个两步过程，如下例所示：

构建 CSS 动画的第一步是定义单个关键帧并使用关键帧声明命名动画。
第二步是使用 animation-name 属性按名称引用关键帧，以及添加 animation-duration 和其他可选动画属性来控制动画的行为。

但是，在引用或应用关键帧规则之前，无需定义关键帧规则。以下示例将向你展示如何使用 CSS3 动画功能将 <div> 框从一个位置水平设置为另一个位置。

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

你必须指定至少两个属性 animation-name 和 animation-duration （大于 0）才能进行动画。但是，所有其他动画属性都是可选的，因为它们的默认值不会阻止动画发生。

注意： 并非所有 CSS 属性都是可动画的。通常，任何接受数字，长度，百分比或颜色值的 CSS 属性都是可动画的。

定义关键帧

关键帧用于指定动画各个阶段的动画属性的值。关键帧使用专门的规定，在规则 CSS - @keyframes 。关键帧样式规则的关键帧选择器以百分比（%）或关键字 from （相同为 0％）或 to （相同为 100％）开头。选择器用于指定在动画持续时间内构造关键帧的位置。

百分比表示动画持续时间的百分比，0％表示动画的起点，100％表示终点，50％表示中点，依此类推。这意味着，2s 动画中的 50％关键帧将成为动画的 1s。

.box {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
 
/* Standard syntax */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}

动画速记属性

创建动画时需要考虑许多属性。但是，也可以在一个属性中指定所有动画属性以缩短代码。

该 animation 属性是一个速记属性，用于按列出的顺序一次设置所有个动画属性。例如：

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}

注意： 如果缺少或未指定任何值，则将使用该属性的默认值。这意味着，如果 animation-duration 缺少属性值，则不会发生转换，因为其默认值为 0。

CSS3 动画属性。

下表提供了所有与动画相关的属性的简要概述。

属性	描述
`animation`	用于在单个声明中设置所有动画属性的简写属性。
`animation-name`	指定 `@keyframes` 应应用于所选元素的已定义动画的名称。
`animation-duration`	指定动画完成动画的一个循环所花费的秒数或毫秒数。
`animation-timing-function`	指定动画在每个循环的持续时间内的进度，即缓动函数。
`animation-delay`	指定动画何时开始。
`animation-iteration-count`	指定停止前应播放动画循环的次数。
`animation-direction`	指定动画是否应在交替循环中反向播放。
`animation-fill-mode`	指定 CSS 动画在执行之前和之后应如何将样式应用于其目标。
`animation-play-state`	指定动画是运行还是暂停。
`@keyframes`	指定动画期间各个点处动画属性的值。