css3动画animation – CSS3高级教程

上一章CSS3高级教程请查看：css3 转换translation

CSS3动画特性允许你创建关键帧动画。

创建CSS3动画

在前一章中，你已经了解了如何制作简单的动画，比如通过CSS3转换特性将属性从一个值转换为另一个值。然而，CSS3转换几乎无法控制动画随时间的发展。

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

• 构建CSS动画的第一步是定义单个关键帧并使用关键帧声明为动画命名。
• 第二步是使用animationname属性通过名称引用关键帧，并添加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属性是一个简写属性，用于按列出的顺序一次性设置所有单独的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动画属性

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