动画 | animation

animation CSS属性是各种动画属性的简写属性：animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，和animation-play-state。

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

​

描述其中属性是动画是否可用；值得注意的是，这个描述对于CSS转换也是有效的。

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state: running

Applies to all elements, [`::before`](::before) and [`::after`](::after) [pseudo-elements](pseudo-elements)    [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• animation-name： 作为指定
• animation-duration： 作为指定
• animation-timing-function： 作为指定
• animation-delay： 作为指定
• animation-direction： 作为指定
• animation-iteration-count： 作为指定
• animation-fill-mode： 作为指定
• animation-play-state： 作为指定

Animation type discrete   Canonical order order of appearance in the formal grammar of the values  

句法

animation属性被指定为一个或多个以逗号分隔的单个动画。

每个单独的动画被指定为：

• 零次或一次出现以下值：
  • <single-transition-timing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>
• 动画的可选名称，可能是none、 <custom-ident>或<string>
• 零个，一个或两个<time>值

每个动画定义中的值的顺序非常重要：可以将第一个值分析为<time>分配给animation-duration，并将第二个值分配给animation-delay。

每个动画定义中的顺序对于区分animation-name其他关键字的值也很重要。在解析时，animation-name必须为这些属性而不是for接受对于其他属性有效的关键字，而且这些关键字的值不是以前的速记形式找到的animation-name。此外，在序列化时，其他属性的默认值必须至少输出以区分animation-name可能是另一个属性值的情况，并且可能会在其他情况下输出。

值

<single-animation-iteration-count>动画播放的次数。该值必须是其中的一个animation-iteration-count。<single-animation-direction>动画播放的方向。该值必须是其中的一个animation-direction。<single-animation-fill-mode>确定如何在执行动画之前和之后应用动画的目标样式。该值必须是其中的一个animation-fill-mode。<single-animation-play-state>确定动画是否正在播放。该值必须是其中的一个animation-play-state。

形式语法

<single-animation>#where <single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]where <single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function><single-animation-iteration-count> = infinite | <number><single-animation-direction> = normal | reverse | alternate | alternate-reverse<single-animation-fill-mode> = none | forwards | backwards | both<single-animation-play-state> = running | paused<keyframes-name> = <custom-ident> | <string>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)<frames-timing-function> = frames(<integer>)

示例

Cylon Eye

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

​

有关其他示例，请参阅使用CSS动画。

规范

浏览器兼容性