动画—Keyframes介绍

动画—Keyframes介绍

Animation动画

css3为Animation动画提供的几个属性如下：

animation-name:指定动画名称，该属性指定一个已有的关键帧定义。

animation-duration:指定动画持续时间。

animation-timing-funtion:指定动画变化速度。

animation-delay：指定动画延迟多长时间才开始执行。

animation-iteration-count：指定动画的循环执行次数。

animation:这是一个复合属性。该属性的格式为：

animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count.

keyframes(关键帧)：计算机动画术语， 帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。

关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{

  0%{

   background: red;

  }

  50%{

   background: red;

  }

  100%{

    background: green;

  }

}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，

从而达到一种在不断变化的效果。

调用动画

animation-name属性:主要是用来调用 @keyframes 定义好的动画。

需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），

如果不一致将不具有任何动画效果。

属性值：

none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

“@keyframes”定义的动画名称。