概念

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。详情查阅MDN

/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */

animation: 3s ease-in 1s 2 reverse both paused slidein;

1 animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
2 animation-duration属性指定一个动画周期的时长。
3 animation-timing-function设置动画在每个循环持续时间内的进度。
4 animation-delay设置动画开始的时间。动画可以在稍后，从其开始立即开始或在动画中途立即开始
5 animation-iteration-count设置在停止之前动画循环应播放的次数。
6 animation-direction设置动画是向前播放，向后播放还是来回交替播放。
7 animation-fill-mode设置CSS动画在执行之前和之后如何将样式应用于其目标。
8 animation-play-state设置动画是运行还是暂停。

实践

转载自凹凸实验室

1. animation-delay

MDN 中的介绍：animation-delay CSS 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

该属性值默认为 0s，可为正值，也可为负值。

动画时间轴

由于 css3 动画没有时间轴，animation-delay 最常见的是用于将动画与其他动画的执行时机错开，将动画落到不同的时间点，形成动画时间轴。

.ani--first {
    animation-name: aniFirst;
    animation-duration: 2s;
    animation-delay: 0s;
}
.ani--second {
    animation-name: aniSecond;
    animation-duration: 1s;
    animation-delay: 2s; /* aniSecond 延迟 2s 执行*/
}

形成的时间轴如下图所示：

轮播

css3 animation 亦可实现一些 js 的效果，例如利用 animation-delay 可以实现一个简单的轮播。以下是一个三屏轮播的例子。

.slider {
  position: relative;
  width: 500px;
  height: 300px;
}
.slider:hover .slider__item {
  animation-play-state: paused;
}
.slider__item {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  animation: 6s infinite linear both ani;;
/* 
具体：
animation-name: appears;//动画名称
animation-duration: 6s;//动画周期的时长
animation-timing-function: linear; //动画在每个循环持续时间内的进度，linear线性的
animation-iteration-count: infinite; //动画循环次数，infinite无穷循环
animation-fill-mode: both;  //动画在执行之前和之后如何将样式应用于其目标
*/
}
.slider__item:nth-child(1) {
  animation-delay: 0s;
}
.slider__item:nth-child(2) {
  animation-delay: 2s;
}
.slider__item:nth-child(3) {
  animation-delay: 4s;
}

@keyframes ani {
  0%, 33.33% {
    opacity: 1;
    visibility: visible;
  }
  33.34%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

<div class="slider">
  <img src="http://jdc.jd.com/img/500x300?color=6190e8&text=slider1&textColor=ffffff" class="slider__item" />
  <img src="http://jdc.jd.com/img/500x300?color=2ebaae&text=slider2&textColor=ffffff" class="slider__item" />
  <img src="http://jdc.jd.com/img/500x300?color=3d5a92&text=slider3&textColor=ffffff" class="slider__item" />
</div>

有关于css3 animation

概念

实践

1. animation-delay

动画时间轴

轮播