animation 与 transition 的区别

animation 与 transition 的区别

作为移动端开发，css3 动画是基本功之一，在工作中难免遇到动画相关，那就必须先得搞懂 animation 和 transition 的区别

• animation 的属性
  1. animation-name keyframe 的名称
  2. animation-duration 完成 keyframe 的花时间 单位是秒
  3. animation-timing-function 动画的曲线 有 linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)
  4. animation-delay keyframe 执行前的延迟时间
  5. animation-iteration-count 动画执行的次数 n 与 infinite（无限循环）
  6. animation-direction 是否轮流播放动画 normal 与 alternate(0-1-1-0 式播放)
  7. animation-fill-mode forwards 停留在结束状态 backwards 让动画回到第一帧的状态 both 设置动画结束时的状态，以结束时动画的状态优先
• transition 的属性
  1. transition-property 在哪个 css 属性变化时执行 transition
  2. transition-duration 执行 transition 的时长 单位秒
  3. transition-timing-function 动画的曲线 linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)
  4. transition-delay 延迟多长后时间执行 单位秒
• transition 与 animation 的区别
  • transition
    1. 需要事件触发，比如点击时添加一个有 transition 的 class
    2. 一次性的，只执行一次，除非写一个多少秒执行的 setInterval
    3. 只能定义开始和结束状态
    4. 只能设计一个属性变化
    5. 用户的最终状态停留在有 transition 的 class
    6. disiplay：none 到 display：block 不会产生动画效果
  • animation
    1. 不需要事件触发
    2. 可以多次执行或者循环执行
    3. 可以定义多帧的状态
    4. 可以设置多个属性状态变化
    5. 可以设定停止在哪个状态
• 片段代码

.box {
  width: 100px;
  height: 100px;
  background: #555;
  -webkit-animation: fly 1s linear 1s 3 alternate both;
}

@-webkit-keyframes fly {
  0% {
    -webkit-transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(40px);
  }

  100% {
    -webkit-transform: translateX(100px);
  }
}

#box2 {
  width: 100px;
  height: 100px;
  background: #555;
}

.fadeOut {
  opacity: 0;
  transition: opacity 1s ease;
}

<div class="box" id="box"></div>
<div id="box2"></div>
<script>
  document.getElementById('box').onclick = function() {
    document.getElementById('box2').className = 'fadeOut'
  }
</script>

• 总结
  • animation 和 transition 的是 css3 属性，所以再设置的时候要加上兼容头，具体的细节可以看MDN 贝塞尔曲线可以使用工具