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。
下表简要概述了所有与动画相关的属性。
属性 | 描述 |
---|---|
animation | 用于在单个声明中设置所有动画属性的简写属性。 |
animation-name | 指定@keyframes应应用于所选元素的已定义动画的名称。 |
animation-duration | 指定动画完成一个动画周期所需的秒数或毫秒。 |
animation-timing-function | 指定动画在每个周期的持续时间内如何进行,即缓动功能。 |
animation-delay | 指定动画何时开始。 |
animation-iteration-count | 指定在停止之前动画循环应播放的次数。 |
animation-direction | 指定动画是否应在交替的循环中反向播放。 |
animation-fill-mode | 指定CSS动画在执行之前和之后应如何将样式应用于其目标。 |
animation-play-state | 指定动画是运行还是暂停。 |
@keyframes | 指定动画期间各个点的动画属性的值。 |