5分钟学会CSS动画-Part1：Transition

刚接触css的时候一直很困惑动画的问题。Transition，Transform还有Translate这些长得很像的属性都是什么？如何使用animation？这些虽然看起来很复杂很繁琐，其实搞清楚之后很简单，而且很实用，加了动画效果的网页会立刻显得生动活泼。

CSS动画主要由两个属性来实现：

1. Transition
2. Animation + Keyframes

这篇文章主要介绍Transition，关于Animation的看这里

transition的意思就是当某个元素的某个属性发生变化的时候，transition会帮你添加中间帧，让这个变化不那么生硬，比如下面这样一个简单的box的hover动画,如果不添加这一行transition代码就会生硬的直接从方变成圆。

transition1.gif

基本语法

.element {
  transition: [property] [duration] [ease] [delay];
                变化属性    变化时间   曲线   延时
}

比如.red { transition: opacity 300ms ease-in-out 1s;}意思就是transition会监测这个class名为red的元素，如果这个元素的opacity发生了变化，那么transition会帮你把这个变化变成一个持续时间300ms的动画，这个动画的速度曲线是ease-in-out，并且会有1s的延迟，也就变化的1s后开始执行动画。

理解了transition是什么之后，现在有两个问题：

1. 有哪些属性可以transition？
2. 怎么触发transition？

问题一：有哪些属性可以transition？

这里查看完整列表。
其实很简单，概括的说，只有两类属性是适合（并且可以）transition的：transform和opacity，其中transform又分为三种类型

Transform属性

---

• translate ，位移。
  比如transform: translateY(15px) 就是在y轴方向往下移动15px。

• scale，放大缩小
  比如transform: scale(1.2) 就是讲元素放大1.2倍

• rotation，旋转
  比如 transform: rotate(5deg) 元素顺时针旋转15度

问题2：如何触发一个transition？

---

常见方法也只有两种：

1. hover之类的伪类
2. 通过class的改变

🌰1 通过hover伪类触发动画

<div class="trigger">
  <div class="box"></div>
</div>

.trigger {
  width: 200px;
  height: 200px;
  background: #ddd;
  border: 20px solid #999;
}

.box {
  display: inline-block;
  background: pink;
  width: 200px;
  height: 200px;
  transition: transform 300ms ease-in-out;
  pointer-events: none;
}

.trigger:hover .box {
  transform: translate(200px, 150px) rotate(20deg);
}

transition2.gif

transition属性总是待在会发生变化的元素里等待某个属性变化的来临。什么时候来临呢？这就需要一个trigger的时机，在上面这个例子中就是当box的父元素.trigger:hover的时候。

注意其中 pointer-events这个属性，如果不添加这一个属性，当hover box的时候，也会触发这个transform。

🌰🌰 2 通过添加class触发动画

添加一点js

$('.trigger').on('click',function(){
  $(this).toggleClass('clicked');
});

再改变一下css

.trigger.clicked .box {
  transform: translate(200px, 150px) rotate(20deg);
}

这样就是通过改变class来触发transition的动画，当.trigger被点击的时候，给.box一个class：clicked，这个新的class会让box的transform属性发生变化，从而触发动画。

*小技巧：在chrome里面还能直接查看速度动画哦！在chrome里面找到合适的动画曲线，还能直接复制bezier（贝塞尔）曲线到css里面，非常方便。

Screen Shot 2017-04-22 at 5.06.15 PM.png