css3动画animation – CSS3高级教程 css3动画|CSS

上一章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动画属性【css3动画animation – 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	指定动画期间不同点的动画属性值。