刚接触css的时候一直很困惑动画的问题。Transition，Transform还有Translate这些长得很像的属性都是什么？如何使用animation？这些虽然看起来很复杂很繁琐，其实搞清楚之后很简单，而且很实用，加了动画效果的网页会立刻显得生动活泼。
CSS动画主要由两个属性来实现：
- Transition
- Animation + Keyframes
这篇文章主要介绍Transition，关于Animation的看这里
transition的意思就是当某个元素的某个属性发生变化的时候，transition会帮你添加中间帧，让这个变化不那么生硬，比如下面这样一个简单的box的hover动画,如果不添加这一行transition代码就会生硬的直接从方变成圆。
基本语法
.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是什么之后，现在有两个问题：
- 有哪些属性可以transition？
- 怎么触发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？
常见方法也只有两种：
- hover之类的伪类
- 通过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);
}
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里面，非常方便。
