CSS动画

动画由多组样式（如外观、变换等效果）组成，创建动画的第一步就是使用@keyframes指令创建多组样式，即关键帧（keyframe）组，其中，每一帧都应由百分比位置和样式组成，元素应用关键帧组后会自动生成每一帧之间的动画效果。

下面的代码创建了名为kf1的关键帧组，并应用到div1元素。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        @keyframes kf1 {
            0% {
                transform:scale(2,2);
                background-color:red;
            }
            50% {
                transform: skewX(45deg);
                background-color:green;
            }
            100% {
                transform:skewX(-45deg);
                background-color:blue;
            }
        }
        #div1 {
            width:100px;
            height:50px;
            background-color:gray;
            animation-name:kf1;
            animation-duration:3s;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

本例，在kf1关键帧中分别创建0%、50%和100%位置的关键帧，各帧分别设置了样式，如变换和背景颜色；此外，代码中还使用了两个动画相关的CSS属性，包括：

animation-name，指定元素应用关键帧组的名称。
animation-duration，指定动画完成的时间，示例为3秒。

下面再来了解一些动画相关的CSS属性。

animation-delay属性，设置延时时间。

animation-iteration-count属性，设置动画重复的次数，infinite为无限循环。

animation-timing-function属性，设置动画执行节奏，常用值包括：

ease，默认值。
linear，匀速。
ease-in-out，开始缓慢，然后加速，最后再慢下来。
ease-in，开始缓慢，然后匀速。
ease-out，开始匀速，然后慢下来。

animation-fill-mode属性，指定动画执行前或执行后元素样式的应用模式，属性值包括：

backwards，第一个关键帧中的属性会立即应用，有延迟或停止状态时也这样。
forward，应用最后一个关键帧的计算样式。
both，同时应用正向和反向填充。

animation-play-state属性，设置动画执行状态，属性值包括：

paused，暂停。
running，执行。

animation-direction属性，设置动画播放的方向，包括：

normal，正向播放。
reverse，反向播放。
alternate，从正向播放开始，正向播放和反向播放交替进行。
alternate-reverse，从反向播放开始，反向播放与正向播放交替进行。

虽然动画执行效果也可以使用animation属性统一设置，但由于动画的设置比较复杂，一般情况下可以使用独立的动画属性进行设置。

此外，动画为动态样式，需要多测试和观察，以便能够达到理想的效果。