CSS动画
1、transform
2、transition
3、animate
概述
在过去，如果想要页面上的东西动起来，只能使用js加上各种计算。
感谢时代的进步，css也在这些年有了长足的发展，现在已经可以使用css来做一些简单的动画效果。
css动画的制作其实并没有什么特别高深的地方，引入少量的css代码就能实现丰富多彩的页面效果。
但依然需要深入理解css的基础才能灵活运用，做出画面美观、代码简洁、性能高效的css动画。
直播录屏版
传送门：https://v.qq.com/x/page/q07262shdwg.html
1.transform 变形
有的人可能会对transform和transition迷糊，先来解析他们的英文：
首先看看词根trans，通常表示穿过，穿越的意思，而form则表示形状。
当他们连到一起就是穿越了这个形状，也就是变形的意思。
如果对变形金刚感兴趣的话那对这个单词应该很熟悉transformer。
而ion后缀则是一个名词后缀，意思也就是穿过穿越的名词形式，翻译过来就是过渡转变。
这样首先搞清楚这两个单词的区别，才好学习他们的用途。
transform是用于改变块级元素的形状，它有四种变形方式：
移动，缩放，旋转，以及倾斜。
1.1 移动 translate
其语法是这样的，声明需要变形，变形方式为移动：
.element {
transform: translate(n, m);
}
translate函数能输入两个值，分别表示在横坐标和纵坐标上的位移
同时还能使用translateX(n)和translateY(m)来单独设置位移情况。
元素则会在原来的位置上产生位移并且不会影响文档流
位移的坐标以元素左上角为基点，横坐标向右为正向左为负，纵坐标向下为正向上为负。
1.2 scale 缩放
缩放和移动函数类似，也是可以接受两个值，分别表示横向缩放和纵向缩放：
.element {
transform: scale(n, m);
}
如果只写了一个值则表示横向和纵向上同时缩放：
.element {
transform: scale(n);
}
值得注意的是
scale除了对元素本身的宽高有影响外，对元素的字体大小，padding这些属性也同样有影响。
并且这个函数可以拆分为scaleX(n)和scaleY(m)来使用。
1.3 rotate 转动
转动的语法是这样的：
.element {
transform: rotate(20deg);
}
deg是degrees角度弧度的缩写，说明这是一个角度单位。
默认会以元素的中心为旋转中心，在Z轴上沿顺时针旋转。
如果有需要也可以分别设置按XYZ轴来旋转，分别使用如下三个函数
rotateX(), rotateY(), rotateZ()
1.3 skew 倾斜
倾斜的语法是这样的：
.element {
transform: skew(20deg, 45deg);
}
skew函数能接受两个值，表示先沿着x轴倾斜，然后再沿着y轴倾斜的角度。
在沿着x轴倾斜的时候，会保持高度的不变；
而在沿着Y轴倾斜的时候，会保持着宽度的不变。
当然也可以将这个函数拆分成两个函数分别表示
skewX(20deg),skewY(20deg)
2.transition 过渡动画
前面所说到的变形并不是动画，但是动画的基础之一
而现在说到的transition却是踏踏实实的动画，它是提供了一种在更改css属性时控制动画速度的。
可以让属性变化层位一个持续一段时间的过程，而不是立即生效。
比如将一个元素的背景色从白色改为红色，通过这个改变是立即生效的。
但使用transition后元素的颜色将逐渐从白色变化为红色，按照一定的曲线速率变化，实现过渡动画的效果。
它还可以控制哪些属性发生动画效果，以及何时开始，持续多久以及如何动画等等细节。
比如下方代码，在没有加上transition: 2s;之前，将鼠标放到box上方时可以看到盒子的变化是瞬间发生的。
但加上之后可以看到盒子被hover的时候，的宽高和颜色被自动补全了一段长达2秒的过渡动画：
.box {
width: 100px;
height: 100px;
background: pink;
transition: 2s;
}
.box:hover {
width: 80px;
height: 120px;
background: lightgreen;
}
transition其实是由四个属性组合而成的一个综合写法：
属性名说明
transition-property
用于指定哪个css属性用于过渡，只有指定的属性才会发生过渡动画，默认值all
alltransition-duration
指定过渡的时长。也可以为不同属性分别指定不同时长，默认值0s
transition-timing-function
指定函数变化的曲度速率，有ease,linear,step-end,steps(4,end)几种，默认值ease
easetransition-delay
指定延迟执行的时长，默认值0s
它们的简写语法是这样的，并且要注意书写顺序
比如当有2个数字时长时，会将第一个默认为过渡时长，第二个为延迟时长：
transition:
如果不想一次设置所有all属性的动画可以分别设置：
.box {
width: 100px;
height: 100px;
background: pink;
transition: width 2s ease 0s, height 1s ease 0s, background 2s ease 2s;
}
.box:hover {
width: 80px;
height: 120px;
background: lightgreen;
}
3.animation 关键帧动画
不同于transition过渡动画只能定义首尾两个状态
关键帧动画可以定义多个状态，定义任意多的关键帧。
而过渡动画就是只能定义第一帧和最后一帧这两个关键帧的动画。
因此关键帧动画可以实现更复杂的动画效果。
语法是这样的：
@keynames 动画名称{
时间点（元素状态）
时间点（元素状态）
}
然后把定义好的动画绑定到元素上就能实现关键帧动画了
而不像过渡动画需要一个状态的改变才能触发，比如：
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
animation的具体属性比较多：
属性名说明
animation-name
@keyframes动画的名称
animation-duration
动画一个周期所花费的时间，默认为0
animation-timing-function
动画的速度曲线，默认为ease。
animation-delay
延迟执行
animation-direction
动画是否在下一个周期逆向播放；normal为正常播放，alternate为轮流反向播放
animation-iteration-count
动画被播放的次数
animation-fill-mode
动画时间之外的状态，
animation-play-state
动画是否正在运行或暂停，默认是running
同样的，animation也可以简写，像前面所说到的transition一样，可以把这些属性简写到一起。
使用默认值的部分可以省略掉，不过需要注意的是animation-play-state是不能简写到animation中。
职业选择、求职辅导、学习规划、困难答疑、技术交流等，可以加IT交流群828691304
欢迎访问我们的官网：技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。
这里是技能树.IT修真院，初学者转行到互联网行业的聚集地。"