@keyframes关键帧

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW @keyframes关键帧

作者： 李杨

撰写时间：2019-02-06

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

@keyframes规则通过在动画序列中被定义为关键帧的样式来控制CSS动画序列中的中间步骤。它比转换更能控制动画序列的中间步骤。

要使用关键帧，首先要创建一个带名称的@Keyframes规则，方便后续使用animation这个属性。每个@keyframe规则包含多个关键帧，每一个关键帧都有一个百分比值来作为名称，表示在动画进行中，在什么阶段触发这个帧所包含的样式。

Animation是一个复合属性，有以下子属性

animation-name：指定keyfranes动画名称

animation-duration： 指定动画执行时间

animation-timing-function： 指定动画的速度曲线，默认“ease”缓动

animation-delay：指定动画的延迟时间，默认的话“0”无延迟

animation-direction：规定动画执行方向的，默认“normal”

这个属性比之前学的transition要复杂一点

@keyframes的重复定义

如果多个关键帧使用同一个名称的话，以最后一次的定义为准。@keyframes不存在层叠样式的情况，所以动画在一个阶段会使用一个关键帧的数据。

举个例子：

改变颜色

改变位置

改变颜色和背景位置

Css3的动画属性

@Keyframes的所有属性都在这了

好啦今天就写到这儿啦！