动画 | 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动画播放状态：正在运行
适用于	所有元素，:: before和::之后的伪元素
遗传	没有
媒体	视觉
计算值	作为速记的每个属性：animation-name：指定的animation-duration：指定的animation-timing-function：指定的animation-delay：指定的animation-direction：指定的animation-iteration-count：指定的动画-fill-mode：如指定的animation-play-state：指定的那样
动画类型	离散的
规范的顺序	出现在价值形式语法中的顺序

animation-name: none

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 type discrete   Canonical order order of appearance in the formal grammar of the values

句法

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

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

零次或一次出现以下值：

每个动画定义中的值的顺序非常重要：可以将第一个值分析为<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动画。

规范

规范	状态	评论
CSS动画在该规范中定义“动画”。	工作草案	初始定义。

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 43.0	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)2	10	12-o 12.503	4.0-webkit
frames() timing function	No support4	?	No support4	No support	No support4	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1 -webkit 1 4.0 -webkit	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)	?	?	(Yes)-webkit
frames() timing function	?	?	No support4	No support	?	?