从之前的学习我们知道，CSS3动画效果包括3部分：变形（transform）、过渡（transition）、动画（animation）。前两章我们学习了CSS3变形和CSS3过渡，这一章我们再来学习一下CSS3动画。

在CSS3中，我们可以使用animation属性来实现元素的动画效果。animation属性跟transition属性在功能实现上是非常相似的，都是通过改变元素的属性值来实现动画效果。但是这两者实际上有着本质上的区别。

  • （1）对于transition属性来说，它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
  • （2）对于animation属性来说，它可以将元素的某一个属性从第1个属性值过渡到第2个属性值，然后还可以继续过渡到第3个属性值，以此类推。

从上面我们可以清楚地知道：transition属性（即CSS3过渡）只能实现一次性的动画效果，而animation属性（即CSS3动画）可以实现连续性的动画效果。

语法：

animation: 动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;

说明：

animation是一个复合属性，主要包括6个子属性，如下表所示。

animation的子属性
属性 说明
animation-name 对哪一个CSS属性进行操作
animation-duration 动画的持续时间
animation-timing-function 动画的速率方式
animation-delay 动画的延迟时间
animation-iteration-count 动画的播放次数
animation-direction 动画的播放方向，正向还是反向

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:100px;
            border-radius:50px;
            background-color:red;
        }
        /*定义动画*/
        @keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        /*调用动画*/
        div:hover
        {
            animation:mycolor 5s linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

我们在本地浏览器测试可以发现，当鼠标移到div元素上时，div元素的背景颜色将经历从red到blue、blue到yellow、yellow到green，最后再从green回到red这样的一系列变化。对于具体实现原理，我们稍后会详细介绍，这里只需要看一下效果即可。

小伙伴们可以思考一下，如果让你使用CSS3过渡，能够实现得了上面这种效果吗？肯定是做不到的。这是因为CSS3过渡只能实现一个变化效果，而不能实现连续的变化效果。我们可以这样理解：CSS3过渡只能实现简单的动画（一个），而CSS动画却可以实现复杂的动画（一系列）。