一.CSS动画基础（关键帧）

Vinci_D 2015-07-13

展开全文

http://www./css3/CSS3-animation.html

定义关键帧

动画是由关键帧组成的！在@keyframes声明中，我们有两种方法来对它进行定义：关键字from 和 to；或百分比。

非常简单的动画可能只是把一个对象从一个地方移动到另一个地方。在这种情况下，关键字from 和 to非常适合来定义关键帧。

正如它们的名字，通过写关键帧来定义动画从哪里开始，然后到哪里结束。如果我们把它应用在我们上边提到的简单的小车动画，我们可以把我们的小车从它当前的位置（坐标为0）移动到一个往右400px的位置，来让它在屏幕上移动。

@keyframes drive {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(400px);
    }
}

在很多情况下，你会想要在不止两个状态之间定义动画，这样的话使用百分比会比较合适。

用百分比定义关键帧，从0%关键帧开始，以100%作为结束。0%到100%之间的任何数字都可以定义关键帧，所以使用百分比有非常大的灵活性。当然，如果你喜欢的话，你也可以将百分比和from、to混合使用。

如果我们在小车动画中使用百分比来定义关键帧，它是这样写的：

@keyframes drive {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(400px);
    }
}

正如你看到的，from相当于0%，而to则相当于100%。

如果你的关键帧列表中不包括0%或者100%，元素上现有的动画样式将会直接被用在0%和100%的的位置。此外，你不必按照严格的升序排列来列出百分比。一个0%的关键帧仍然会被认为是动画的第一个关键帧，即使它不是按照顺序排列的。这有很大的灵活性可以给关键帧分组，以便以后再查看。

将动画赋给HTML元素

一旦创建了关键帧声明块，就需要准备把动画赋给一个HTML元素或其它元素。我们还需要为HTML元素定义一个简短的属性列表，比如img元素，为它应用我们刚才创建的动画。

第一个属性是animation-name，用于告诉我们的图像，我们为它应用了哪组关键帧：

animation-name: drive;

第二个属性是animation-duration。我们的关键帧定义了整个动画的内容，但是我们并没有声明我们想要让它持续多长。可以把它设置为2s：

animation-duration: 2s;

animation-duration的默认值是0，这也就是为什么在我们看到动画出现之前，我们想要将它设置成其它值。它可以取秒(s)或微秒(ms)为单位。

只有设置了这两个属性以及我们刚才定义的关键帧，我们才可以看到动画。

我们完整的CSS是这样写的：

.car {
    animation-name: drive;
    animation-duration:1s;
}

@keyframes drive {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(400px);
    }
}

完成了！我们刚才只是完成了创建一个CSS动画需要的最基础的东西：一组定义好的关键帧；一个动画名称用于绑定HTML元素；以及动画的长度声明。

还有一件事……

有两个附加属性是我在所有的动画中都会显式定义的。一次性地完成动画而不再去修改（或是很长一段时间都不再去修改）的情况是非常罕见的。所以，我发现为我自己创建的每个动画都定义animation-timing-function和animation-iteration-count属性，这非常方便。

`animation-timing-function`属性

animation-timing-function属性的默认值是ease。但是，我建议你再显式设置一次这个值，因为它对于动画有非常大的影响（我们会在后面详细说一下它）。对于我们简单的小车示例，我把"timing function"值设置为ease-in：

animation-time-function: ease-in;

`animation-iteration-count`属性

animation-iteration-count属性也是很方便的一个属性，即使你使用的是默认值。这个属性决定了动画会重复播放多少次，它的默认值是1。

animation-iteration-count: 1;

作了这些补充之后，我们的最终CSS是这样的：

.car {
    animation-name: drive;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
}

@keyframes drive {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(400px);
    }
}