CSS动画使以动画过渡的CSS样式配置到另一个成为可能。 动画由2个组件构成，描述的CSS动画的样式和一组指示的开始和结束状态的动画的样式，如以及作为可能的中间的关键帧沿途的航迹。

CSS动画传统的脚本驱动的动画技术有三个关键的优势：

CSS animations配置

要创建一个CSS动画序列，你的风格你想要的元素的动画与动画 财产或其子属性。这可以让你配置的时机和持续时间的动画，以及动画序列的发展，应如何等细节。这并没有配置使用@keyframes定义 下面的使用关键帧动画序列中所描述的规则，这是做动画的实际外观。

animation-delay：动画延迟
配置的元件被加载的时间之间的延迟时间和动画序列的开头。

animation-direction：动画方向
配置与否动画应交替在每次运行方向通过序列或重置起点重演。

animation-duration：动画持续时间
配置动画应该采取的完成一个周期的时间长度。

animation-iteration-count：动画迭代计数
配置的数量的动画应该重复;你可以指定无限无限期重复动画。

animation-name：动画
指定的名称 规则描述@关键帧动画的关键帧。

animation-play-state：动画播放状态
让您暂停和恢复的动画序列。

animation-timing-function：动画定时功能
配置动画的定时的，也就是说，通过关键帧的动画过渡，通过建立的加速度曲线。

animation-fill-mode：动画填充模式
配置采用的是什么样的价值观动画之前和之后执行。

CSS animations定义使用关键帧动画序列

一旦你已经配置了动画的时间，你需要定义外观的动画。这是通过建立两个或多个关键帧，在规则中使用@关键帧。每一个关键帧描述动画元素应该如何在一个给定的时间呈现在动画序列。

由于定时的动画被定义在CSS样式配置动画，关键帧 在它们发生在动画序列中，用百分比来指示时间。0%表示动画序列的第一刻，而100%表示动画的最终状态。因为这两个时间如此重要，他们有特殊的别名：“ 从“和“ 到“。两者都是可选的。如果未指定从 0%或100%时，浏览器开始或完成的动画，使用计算出的值的所有属性。

您可以选择中间步骤，从起点到终点动画一路上包括额外的关键帧。

注：这里的例子不使用任何动画的CSS属性前缀。基于WebKit的浏览器和其他浏览器的旧版本可能需要前 缀的活生生的实例，你可以单击“在浏览器中看到的-webkit 前缀的版本还包括。

制作文字滑过的浏览器窗口

这个简单的例子风格的<h1>元素，使文本在关闭浏览器窗口的右边缘滑动。

h1 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; } }

这里的风格的<H1>元素指定动画应该需要3秒，执行从开始到结束，使用动画持续时间属性，@规则定义的关键帧，关键帧动画序列的名称是名为“的slideIn”。

如果我们想要的任何自定义样式上的<h1> 元素出现在浏览器不支持CSS动画，我们将在这里包括为好;然而，在这种情况下，我们不希望任何自定义样式以外的动画效果。

在规则中使用@关键帧，关键帧定义。在这种情况下，我们只有两个关键帧。第一次发生在0％（使用别名）。在这里，我们配置元素的左边距是100％（即，在包含元素中的最右侧边缘），和元素的宽度为300％（或包含元素的宽度3倍的）。这将导致动画的第一帧的头，在浏览器窗口的右边缘抽出。

第二个（也是最后一个）关键帧发生在100％（使用别名）。左页边被设定为0％，和元件的宽度设置为100％。这将导致标头以完成其动画内容区域的左边缘紧贴。

添加另一个关键帧

让我们添加另一个关键帧前面的例子中的动画。比方说，我们希望标题的字体大小，增加它的动作从右到左了一会儿，然后回到其原来的大小减少。这是简单，只要加入此关键帧：

75% { font-size: 300%; margin-left: 25%; width: 150%; }

这告诉浏览器，75％的方式，通过动画序列的头应该有其左侧的保证金为25％和宽度应该是150％。

使其重复

为了使动画重演，只需使用动画迭代计数物业多少次重复的动画。在这种情况下，让我们用无限的动画无限期地重复：

h1 { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; } 使其来回移动

这使得它重复，但很奇怪，它跳回到开始每次开始动画。我们真正想要的是移动在屏幕上来回。这很容易通过设置动画方向交替：

h1 { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } 使用动画事件

你可以得到额外的控制动画-以及他们有用的信息-通过利用动画事件。这些事件，表示的AnimationEvent 对象，可用于检测在动画开始时完成，并开始一个新的迭代。每个事件包括发生的时间，在它的名称，以及触发事件的动画。

每个动画事件发生时输出一些信息，我们将修改滑动文本的例子，所以我们可以看看他们是如何工作的。

添加动画事件侦听器

我们将使用JavaScript代码来监听所有三个可能的动画事件。设置（）函数配置我们的事件侦听器，我们把它称为是第一次加载文档时，以设置的东西。

function setup() { var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); var e = document.getElementById("watchme"); e.className = "slidein"; }

这是非常标准的代码，你可以得到它是如何工作的文档中为element.addEventListener（）的详细信息。setup（）函数在这里的最后一件事不设置类元素我们会动画“的slideIn”;我们这样做是为了启动动画。

为什么呢？只要动画开始，因为animationstart事件触发，并在我们的例子中，这种情况发生之前，我们的代码运行。因此，我们将开始自己的动画设置类的元素的事实后，被动画的风格。

接收的事件

的事件被传递到的*********（）函数，该函数如下所示。

function listener(e) { var l = document.createElement("li"); switch(e.type) { case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; } document.getElementById("output").appendChild(l); }

这个代码，也很简单。它只是看起来event.type确定哪种类型的动画事件发生，然后添加适当注意的<ul>（无序名单），我们正在使用记录这些事件。

输出，当一切都说过和做过，看起来像这样：

请注意，该时间已经是非常接近的，但不完全，预期动画被配置时建立的定时。还要注意的是最后一次迭代后的动画，不发送的animationiteration事件;相反，animationend的事件发送。

HTML