animation

版本： CSS3

CSS animation 属性是 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;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE10以上版本的浏览器都支持 animation

语法

animation : <single-animation-iteration-count> | <single-animation-direction> | <single-animation-fill-mode> | <single-animation-play-state>

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

每组动画规定的属性如下：

  • 以下属性出现0次或1次： <single-transition-timing-function> 、 <single-animation-iteration-count> 、 <single-animation-direction> 、 <single-animation-fill-mode> 、 <single-animation-play-state>
  • animation 的 name 值可能是： none ， <custom-ident> ， <string>
  • <time> 可能会出现0、1 或 2 次

每个动画定义中的属性值的顺序很重要：可以被解析为 <time> 的第一个值被分配给 animation-duration ，第二个分配给 animation-delay 。

每个动画定义中的值的顺序，对于区分 animation-name 值与其他关键字也很重要。解析时，对于除 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 中可用的值之一。
默认值 看每个独立属性
适用于 所有元素，包含伪对象 ::before and ::after
继承性 无
动画性 否
计算值 指定值
媒体 交互

实例 

<div class="grid">
 <div class="col">
 <div class="note">
 given the following animation:
 <pre>@keyframes slidein {
 from { transform: scalex(0); }
 to { transform: scalex(1); }
}
</pre>
 </div>
 <div class="row">
 <div class="cell">
 <button class="play" ></button>
 </div>
 <div class="cell flx">
 <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div>
 <div class="animation a1"></div>
 </div>
 </div>
 <div class="row">
 <div class="cell">
 <button class="pause" ></button>
 </div>
 <div class="cell flx">
 <div class="overlay">animation: 3s linear 1s slidein;</div>
 <div class="animation a2"></div>
 </div>
 </div>
 <div class="row">
 <div class="cell">
 <button class="pause" ></button>
 </div>
 <div class="cell flx">
 <div class="overlay">animation: 3s slidein;</div>
 <div class="animation a3"></div>
 </div>
 </div>
 </div>
</div>

//JS

window.addeventlistener('load', function () {
  var animation = array.from(document.queryselectorall('.animation'));
  var button    = array.from(document.queryselectorall('button'));

  function togglebutton (btn, type) {
    btn.classlist.remove('play', 'pause', 'restart');
    btn.classlist.add(type);
 btn.title = type.touppercase(type);
  }

  function playpause (i) {
    var btn  = button[i];
    var anim = animation[i];

    if (btn.classlist.contains('play')) {
      anim.style.animationplaystate = 'running';
      togglebutton(btn, 'pause');
    }
 else if (btn.classlist.contains('pause')) {
      anim.style.animationplaystate = 'paused';
      togglebutton(btn, 'play');
    }
 else {
      anim.classlist.remove('a' + (i + 1));
      settimeout(function () {
        togglebutton(btn, i === 0 ? 'play' : 'pause');
        anim.style.animationplaystate = '';
        anim.classlist.add('a' + (i + 1));
      }
, 100)
    }
  }

  animation.foreach(function (node, index) {
    node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause');   }
);
    node.addeventlistener('animationend',   function () { togglebutton(button[index], 'restart'); }
);
  }
);

  button.foreach(function (btn, index) {
    btn.addeventlistener('click', function () { playpause(index); }
);
  }
);
}
)
<div class="view_port">
  <div class="polling_message">
    listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

//CSS
.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%; }
  }

潜在的问题

眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍(ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

考虑提供一种暂停或禁用动画的机制，以及使用Reduced Motion Media Query（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。 

<style>
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:demp 5s infinite;
	-webkit-animation:demo 5s infinite;
}
@keyframesdemo
{
	from{left:0px;}
	to{left:450px;}
}
@-webkit-keyframes demo
{
	from{left:0px;}
	to{left:450px;}
}
</style>
</head>
<body>
<div></div>

效果图：

注意：Internet Explorer 9 及更早IE版本不支持 animation 属性。

下篇： animation-name