原文: A Simple CSS Animation Tutorial

看到这篇文章描述简单易懂，适合初学者，于是乎就想着记录和分享一下。

（正文）

以将黄色方块转变为蓝绿色圆型作为一个开始。

上图是来自于 CSS Visual Dictionary

在上述代码中.animateClass被赋给一个元素,动画随即起效。这个class链接到animationName上，animationName需要设定@keyframes规则。这则动画设置在3秒或者3000毫秒之间。 Note: 中间过程添加的特点的动画-提供了一个曲线来描述在特定时间节点上动画的相对速度。 在接下来的内容中我们将覆盖释放过程和其他一些CSS动画属性。

动画是如何工作的

你可以运用动画在任何那些物理位置、维度、角度或者颜色可以变化的CSS属性上。使用关键帧（keyframes）实现基本动画非常简单。

CSS动画关键帧是使用@keyframes关键字指定的。关键帧让元素的状态维持在动画时间线的点上。

CSS动画引擎会自动的在关键帧之间进行插值。你所需要知道的只是设定动画起始和终点的CSS属性。然后用@keyframes animationName{...}创建一个特定名字的动画。

最后，创建一个特定的class来定义你的动画duration/direction/repeatability/ easing type...，链接到@keyframes上。下面将可视化这个过程。

CSS动画属性

8个独立的动画属性速记：

• animation-name:
• animation-duration
• animation-timing-function
• animation-delay: 动画开始前的延迟
• animation-iteration-count: 动画出现的次数
• animation-direction: forwards/backwards/ alternate sequence
• animation-fill-mode: state of the animation when it is not playing
• animation-play-state: specify whether animation is running or is paused

animation-name

.animationClass {animation-name: animationName;animation-fill-mode: normal;animation: normal 3000ms easa-in;
}@keyframes animationName {0%{}100%{}
}
复制代码

animation-duration

通常想先设置动画的长度。正如下图所示可以设置duration单位为秒或者毫秒。

也可以在动画开始前设置一个延迟。

animation-direction

动画方向可以设置normal/reverse/alternate/alternate-reverse

animation-iteration-count

可以看到明显的问题是动画将跳转回第一帧。可以使用其他的一些动画属性来确保不会发生这种跳转。可以设置动画来循环，或者根据特定的UI动态调整其他属性。通过这种方式，你可以之设计动画的一半，并调整属性来向前或者向后播放动画，比如在鼠标进入和退出事件上。

animation-timing-function

Easing由animation-timing-function指定，能为动画增添个性。这是通过调整动画在时间线上任意给定点的速度来实现的。起始点、中间点和终点特别关键，每个Easing类型都是由贝塞尔曲线定义的。

animation-fill-mode

none/forwards/backwards/both

animation-play-state

paused/running

Forward& Inverse Kinematics

... 待完善