CSS动画
Part1：Transition
CSS动画主要由两个属性来实现：
- Transition
- Animation + Keyframes
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属性发生变化，从而触发动画。
Part2：animation
学会Animation能够写出比单纯的transition炫酷的多的动画效果，要学习animation前先要了解keyframes的写法，这两个属性必须要成对使用才有效果。
1 keyframes
语法
@keyframes [name] {
from {
[styles];
}
to {
[styles];
}
}
keyframes不需要任何选择器。name可以随便起。from后面的大括号描述某个动画开始是怎么样的，to后面描述结束是怎么样的。
比如
@keyframes myframes {
from {
height: 200px;
background: orange;
}
to {
height: 480px;
background: pink;
}
}
更高级点的写法是把from和to换成0%和100%
@keyframes myframes {
0% {
height: 200px
}
100% {
height: 600px
background: orange
}
}
这样做的好处是，你可以尽情添加更多的keyframe百分比，描述更细致的动画效果,甚至不需要按照0-100的顺序来写，比如下面的写法也是可以的：
@keyframes myframes {
0% {
height: 200px
}
30%, 100% {
width: 400px
}
70% {
height: 600px
background: orange
}
}
2 Animation
有了keyframes，就可以在animation中使用它们来给元素添加动画。
2.1 语法
.element {
animation: [name][duration][timeing-function][delay][iteration-count][direction][fill-mode][play-state];
}
animation是需要放在css选择器中的，属性中的第一个name就是需要跟keyframes的name相呼应的。比如下面的缩写方式：
.element {
animation: myframes 2s ease-in 0s infinite normal forwards paused;
}
2.2 animation属性详解
要彻底掌握animation，需要逐项弄清楚这些属性究竟是什么意思：
animation-name: myframes
animation-duration: 2s
animation-delay: 0s
animation-timeing-function: ease-in-out
animation-iteration-count: infinite
animation-direaction: normal
animation-fill-mode: forwards
animation-play-state: running
-
animation-delay是我们需要等多久能看到动画开始，而不是每次动画之间的间隔。如果想要控制每次动画的间隔，需要写在keyframe的百分比中间。 -
animation-direction可以是正常的normal，也可以是reverse，就是倒着来从100%到0%，可以配合animation-iteration-count比如count：3，就倒着执行3次。还可以是alternate，正着1次，倒着1次，正着1次，这样算3次。 -
animation-fill-mode非常有用！它会控制动画结束之后这个元素的停止状态。normal就是最正常的反回最初的状态，而forwards则会让元素停在动画结束的最后1帧的状态。我经常使用fowards这个参数让元素停止在动画结束的状态。 -
animation-play-state可以是running或者是paused，paused可以在任何时间点暂停动画，配合js使用。
2.3 如何触发animation动画
- hover伪类
- class改变
- 增加新元素
2.4 示例应用
- 1
@keyframes note
0%
opacity: 0
transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg)
50%
transform: rotate(-10deg) rotateX(-2deg)
opacity: 1
70%
transform: rotate(3deg)
100%
transform: scale(1)
先将通知元素隐藏，display: none。当元素被hover的时候，display: flex(或者block，这里用flex是因为通知元素内部的布局需要)，并且执行 animation: note 800ms ease-in-out forwards , fowards是为了让动画执行完停止在最后一帧而不是消失，note就是自定义的keyframes。
作者：LesliePeng
链接：https://www.jianshu.com/p/523b5ff7371d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
