7.4 CSS3 动画效果

发布于 2024-08-18 00:24:15 字数 3848 浏览 0 评论 0 收藏 0

如果你制作过Flash动画，那CSS3动画你也能立即上手。CSS3沿用了在Flash和其他基于时间线的应用程序中被广泛使用的动画关键帧技术。

相较于3D变形，CSS3动画的浏览器支持度更高。Firefox 5＋、Chrome、 Safari 4＋、 Android（所有版本）、 iOS （所有版本）均支持，IE 10也决定加入该行列。

CSS3动画由两部分组成：首先是关键帧声明，然后在动画属性中使用该关键帧声明。

上一节我们制作了一个简单的翻转效果，用于展示我对电影的评判结果。但是翻转效果的背面文字非常丑陋，所以我们来给这些文字添加一个有趣的闪烁效果。

首先是关键帧规则：

此处的代码没有加前缀，如果在浏览器中没有效果，你可能需要添加一组完整的浏览器私有前缀（如@-webkit-keyframes）。

我们来分析一下上面的代码：

首先，我们定义了一个@keyframes（关键帧）声明。然后为这个特定的关键帧声明设置了一个名称：warning。你可以将其叫成任何名字，但考虑到这些关键帧声明可以在多个元素上复用，所以建议取一个合理的名字。

可以设置多个关键帧（比如百分比值10%、20%、30%、40%等等），或者也可以使用from和to值来定义动画的开始帧和结束帧。但注意Webkit浏览器在使用from和to值的情况下效果无法保证（它更喜欢0%和100%）。

本例给文字阴影加一点动画，动画开始时是4像素阴影，然后用50%的时间变化至40像素阴影，之后再变化回4像素阴影。

我们已经声明了关键帧，接下来可以在动画属性中引用它：

在animation属性之后，我们设定了要使用的关键帧（例子中的warning），然后设定了动画的持续时间（1.5s），之后设定了animation-iteration-count（我们在此时使用了infinite让动画连续循环播放），最后设定了调速函数（ease-in）。静态截图显然无法展示出动画，但希望你能想象得出文字阴影一闪一闪的效果。访问这里查看效果：http://www.andthewinnerisnt.com。

CSS3动画缩写语法可以接受全部7个独立动画属性的值。除了上例中使用的之外，还可以设定animation-delay（动画开始前的延时），animation-play-state（值可以是running或paused，用于控制动画的播放和暂停），最后还有animation-fill-mode，这个属性到现在我也没找到用武之地（默认值是none）。当然也可以不用缩写语法，而是像下面这样将它们一个一个单独列出来：

前面已经提过，在其他元素上复用动画效果非常简单，如下所示：

这样导航链接也会有同样的闪烁效果。你可以（希望能）看到下面截图中的STILLS/PHOTOS链接正处在闪烁过程中。访问这里看看真实效果：http://www.andthewinnerisnt.com。

这只是使用CSS3动画的一个简单示例。事实上任何CSS属性都可以用在关键帧动画中，所以有无限可能性。网上有数不清的CSS3动画技巧范例，像http://webdesignerwall.com/trends/47-amazing-css3-animation-demos 这个网页就足以给你提供丰富的CSS3动画灵感。

想了解W3C有关CSS动画的最新进展，请见这里：http://dev.w3.org/csswg/css3-animations/。

组合使用CSS3变形和动画

我们来尝试再做一种效果，秀一下我们的CSS3功力。我想将侧边栏的图片按照不同的角度来放置，然后让它们动起来。目标就是当页面刚加载进来的时候这些图片都“晃”几下。侧边栏的标签代码如下：