css3动画 --- Animation

Animation

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。

动画包括两个部分：描述动画的样式规则；用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

1 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。

2 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳。

3 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节。

animation的子属性有以下几个：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

初始值

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

animation-name指定由@keyframes描述的关键帧名称。

animation-name: test1, animation4;

animation-duration属性指定一个动画周期的时长。单位为秒(s)或者毫秒(ms)，无单位值无效。

animation-timing-function设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

animation-delay设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。

animation-iteration-count设置动画重复次数，可以是1次，也可以无限循环（infinite）。默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

animation-direction设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

// 每个动画循环结束，动画重置到起点重新开始，这是默认属性
animation-direction: normal 
// 反向运行动画，动画结束后在从尾到头运行
animation-direction: reverse
// 动画播放在第偶数次向前播放，第奇数次向反方向播放，后面依次循环
animation-direction: alternate
// 动画播放在第奇数次反向播放，第偶数次向前播放，后面依次循环
animation-direction: alternate-reverse

animation-fill-mode指定动画执行前后如何为目标元素应用样式。

// 当动画未执行时或已经执行后，动画将不会将它的任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值
animation-fill-mode: none;
// 当动画完成后，保持最后一帧时的样式（在最后一个关键帧中定义）
animation-fill-mode: forwards;
//  在 animation-delay 所指定的一段时间内，在动画显示之前，就应用第一帧开始时的样式（样式在第一个关键帧中定义）
animation-fill-mode: backwards;
// 在 animation-delay 所指定的一段时间内，在动画显示之前，就应用第一帧开始时的样式（样式在第一个关键帧中定义）。并且当动画完成后，保持最后一帧时的样式（在最后一个关键帧中定义）
animation-fill-mode: both;

animation-play-state允许暂停和恢复动画。

.animate {
    animation-play-state: paused;
}
.active .animate {
    animation-play-state: running;
}

一个圆球的不同animation！

animation: slidein 3s ease-in 1s infinite reverse both running;
animation: slidein 3s linear 1s infinite running;
animation: slidein 3s linear 1s infinite alternate;
animation: slidein .5s linear 1s infinite alternate;

 使用keyframes定义动画序列

动画的表现需要通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的，关键帧使用一个百分比值来指定动画发生的时间点。

0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

 该例中p元素由浏览器窗口右边滑至左边：

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {  /*也可以写成0%*/
    margin-left: 100%;
    width: 300%; 
  }

  to {  /*也可以写成100%*/
    margin-left: 0%;
    width: 100%;
  }
}

p来回滚动

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slidein {
  0% {
    margin-left: 100%;
    width: 300%; 
  }
  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  100% {
    margin-left: 0%;
    width: 100%;
  }

以下是另一个例子

<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%; }  }

添加动画事件监听器

<body>
  <h1 id="watchme">Watch me move</h1>
  <p>This example shows how to use CSS animations to make <code>h1</code> elements
  move across the page.</p>
  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
  <ul id="output">
  </ul>
</body>

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

这段代码同样非常简单，简单地通过event.type来判断发生的是何种事件，然后添加对应的注解到<ul>中。

注意以上时间非常接近预期时间，但不是完全相等。也要注意在最后一个周期完成后，不会触发animationiteration事件，而触发animationend事件。

输出结果如下所示:

• Started: elapsed time is 0
• New loop started at time 3.01200008392334
• New loop started at time 6.00600004196167
• Ended: elapsed time is 9.234000205993652

原文：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations