最近在学习CSS动画相关的知识，于是连带着把会用到的一些知识点进行了一些整理。在此，做一下总结。

Transform

CSS3中引入的transform属性可以让元素实现变形，旋转，缩放等视觉效果。

2D变化

2D的transform应用在x和y轴上，而3D的则多了一条z轴。

1. Rotate旋转

1
2
3
4
5
6
.box {
  transform: rotate(20deg); //顺时针
}
.box2 {
  transform: rotate(-20deg); //逆时针
}

可以将一个元素绕着旋转点进行0到360度的旋转操作。默认的旋转点是在元素的中心点上（50% 50%）。

2. Scale缩放

1
2
3
4
5
6
7
.box {
  transform: scale(.5); //缩小为原来的一半
}

.box2 {
  transform: scale(2); //放大为原来的两倍
}

你也可以只针对宽度或者高度进行缩放操作。

1
2
3
4
5
6
7
.box {
  transform: scaleX(2); //将宽度变为原来的两倍
}

.box2 {
  transform: scaleY(.25); //将高度变为原来的25%
}

3. Skew 倾斜

1
2
3
4
5
6
7
8
9
10
11
.box {
  transform: skewX(-5deg); //X轴顺时针旋转5度
}

.box1 {
  transform: skewY(20deg); //Y轴逆时针旋转20度
}

.box3 {
  transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
}

4. Translate 平移

1
2
3
4
5
6
7
8
9
10
11
.box {
  transform: translateX(-10px); //在横轴上向左平移10个像素点
}

.box2 {
  transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
}

.box3 {
  transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}

5. Matrix矩阵

矩阵形式是将变形函数组合成一个矩阵形式进行使用的，通常都需要借助工具。更详细的说明可以参考这里。

PS: 这些变形模式可以同时作用在一个元素上。如

1
2
3
.box {
  transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2);
}

Transfrom Origin

默认的变换原点是在元素的中心，如果我们想要改变它，可以使用属性transform-origin。它接受两个值，分别指定X和Y轴上的位置。可以使用px或百分比作为单位,也可以使用bottom,left等值进行定义。

1
2
3
4
.box {
  transform: rotate(15deg);
  transform-origin: 0 0; //以左上角点为变换点进行旋转
}

3D变化

3D是以2D变化为基础的，只是增加了一个z轴。这条z轴是可以看做一个虚拟垂直与屏幕的坐标轴，它代表在元素的远近距离。其中正值代表离屏幕越近，负值代表离屏幕越远。

Perspective

perspective在中文中翻译为透视，这个属性值在应用中主要是用来指定元素离观看者的距离，值的设定一般来说设置为< 300px时会有强烈失真，500~1000px失真中等，2000px以上失真轻微。

定义perspective属性可以选择直接定义在transform中，如：

1
2
3
.box {
  transform: perspective(300px) rotateX(20deg);
}

也可以选择定义在父元素上，这样，所有子元素都将使用这个值:

1
2
3
4
5
6
7
.parent {
  perspective: 300px;
}

.child  {
  transform: rotateX(20deg);
}

perspective-origin

这个属性是叫做“透视原点”，可以使用X轴与Y轴的长度数据或百分比，以及left/center等值进行设置。默认值为50% 50%。可以看做镜头在平面上的距离。

backface-visibility

这个属性用来控制是否可以看到被挡住的那些面，它的值分为visible或hidden。

Transition

transition主要是用来做过渡效果的，可以提供使元素间的变化显得不那么生硬。

属性 值 作用
transition-property CSS属性值 定义哪些CSS属性会应用transition
transition-duration 时间 定义transition的持续时间
transition-timing-function 时间函数：ease\ linear\ ease-in\ step-start等 用来控制过渡效果速度函数的
transition-delay 时间 延迟

transition属性的合并用法是按照上述的属性顺序进行定义的。缺失的将使用默认值。

1
2
3
.box {
  transition: all .5s ease; 
}

Animation & Keyframes

要使用CSS动画，需要先定义一个关键帧（keyframes)。关键帧指明在特定时间点元素所展示出来的样式状态。触发的时间点用百分比表示，其中from关键字相当于0%,to关键字相当于100%。在定义关键帧中元素样式时候,!important关键字会被忽略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes animationName {
  0% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

@keyframes fadeFromTo {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

animation的属性有

属性 值 作用
animation-name 定义的keyframes名字 用来获取定义的动画效果
animation-duration 时间长度 用来指定动画从开始到结束所用时间
animation-delay 时间长度 延迟时间
animation-iteration-count 数字（可以使用小数） 或 infinite(无限) 动画循环播放次数
animation-timing-function linear等 定义动画播放函数，用以控制播放速度曲线
animation-fill-mode none,forwards,backwards,both 指定当动画播放结束的时候应用到元素上的样式
animation-direction normal,reverse,alternate,alternate-reverse 控制动画是否反向播放

其简写形式为: 

1
animation : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

多个动画

当要对一个元素添加多个动画效果时，需要用,分隔开来，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.element {
  animation: fadeIn 4s 1s infinite linear alternate,
  			rotate 4s 1s infinite linear alternate;
}

@keyframes fadeIn {
  to {
    opacity: 0;
  }
}

@keyframes rotate {
  to {
    transform: rotate(180deg);
  }
}