CSS3 动画(Animations)

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;
    
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 

@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

测试看看‹/›

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

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

定义关键帧

关键帧用于指定动画各个阶段的动画属性的值。关键帧是使用专门的CSS规则-@keyframes指定的。关键帧样式规则的关键帧选择器以百分比（％）开头或关键字从（等于0％）到到（等于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;
    
    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;}
}
 

@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;
    
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 

@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	指定动画期间各个点的动画属性的值。