类似于flash
只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)

/*必要*/
animation-name        动画名称（关键帧名称）
animation-duration        动画持续时间

/*可選*/
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
animation-timing-function    动画运动形式
animation-delay            动画延迟
animation-iteration-count        重复次数
infinite为无限次
animation-direction            播放前重置
alternate    动画直接从上一次停止的位置开始执行
normal    动画第二次直接跳到0%的状态开始执行

通过class
在class里加入animation的各种属性
直接给元素加-webkit-animation-xxx样式
animation的问题
没法动态改变目标点位置
obj.addEventListener('webkitAnimationEnd', function (){}, false);

最簡單例子：

AnimationEnd方法封裝：

    function addEnd(obj,fn){
        obj.addEventListener('webkitAnimationEnd',fn,false);
        obj.addEventListener('animationend',fn,false);
    }

See the Pen epNbew by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

注意：
1、@keyframes裏，當100%走完後，元素狀態恢復為未走之前，即<style></style>裏設置的狀態！
2、animation: 執行時間 | 動畫名稱 | 運動形式 | 正反序
3、通過將動畫加到class實現點擊會比直接寫好

css3 折紙效果
異常重要的佈局：

<input type="button" value="展开"/>
<div id="wrap">
    <h2>标题</h2>
    <div>
        <span>选项一</span>
        <div>
            <span>选项二</span>
            <div>
                <span>选项三</span>
                <div>
                    <span>选项四</span>
                    <div>
                        <span>选项五</span>
                        <div>
                            <span>选项六</span>
                            <div>
                                <span>选项七</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

要點：

#wrap{ perspective: 800px; } 

#wrap div{
    transform-style: preserve-3d;     /*每一個div都為一個3d轉換*/
    transform-origin: top;    /*top開始折紙*/
    transform: rotateX(-120deg);    /*初始化先隱藏不同，即折到看不見*/
}

#wrap h2{ z-index:100 } /*設置z-iindex 最高 ,避免被下面div遮蓋*/
var timer = null;
var i = 0
var on = true
inp.onclick = function () {
  inp.style.left = '-200px' //技巧点,點擊時先設置移動
  if (timer) {
    return;
  } //bug,只开不关，所以当不断点击时会出现重复关，如果timer正在执行，return，不往下执行；

  if (on) {
    i = 0; //開始時重置
    timer = setInterval(function () {
      div[i].className = 'show'
      i++;
      if (i == div.length) {
        clearInterval(timer)
        timer = null; //因使用timer作為判斷條件，结束时把定时器置null , 即false;
        inp.style.left = '0'   //執行後再回來
        inp.value = '关闭'
      }
    }, 150)
  } 
  else {
    i = div.length - 1; //開始時重置
    timer = setInterval(function () {
      div[i].className = 'close'
      i--;
      if (i < 0) {
        clearInterval(timer)
        timer = null; //因使用timer作為判斷條件
        inp.style.left = '0'
        inp.value = '展开'
      }
    }, 150)
  }
  on = !on
}

See the Pen YyXBKY by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>