前言
在之前的文章中已经详细聊过了CSS中常用的定位布局之类的知识点，但架不住不按常理出牌的面试官总能问到点奇奇怪怪的问题，就好比这种好几年都不见得用得上的CSS动画属性。今天就用一篇文章来带各位彻底搞明白CSS中的这些动画属性。
正文
transform
-
Transform 这一属性通常是用于控制容器的旋转，平移，缩放以及倾斜效果，相信经常切页面的各位对这个属性应该不陌生，毕竟经常切页面的各位小伙伴会用到这个属性transform：translat（-50%，-50%）把容器向左向上各平移自身的50%去做容器的居中。除此之外还有一些transform经常用到的属性值：
-
scale 于缩放元素，接受一个参数，表示水平和垂直方向上的缩放比例。例如，scale(2, 1.5) 将元素在水平方向上放大两倍，在垂直方向上放大 1.5 倍。
-
rotate 用于旋转元素，接受一个参数，表示旋转角度。角度可以用度数（deg）或弧度（rad）表示。例如，rotate(45deg) 将元素顺时针旋转 45 度。
-
skew 用于斜切元素，接受两个参数，分别表示水平和垂直方向上的斜切角度。例如，skew(10deg, -5deg) 将元素水平方向上斜切 10 度，垂直方向上斜切 -5 度。
除了以上常用的函数之外，还有其他一些函数和属性可以与 transform 属性一起使用，例如：
-
transform-style 用于指定元素的子元素如何在 3D 空间中进行变换。默认为 flat，表示子元素不会继承父元素的 3D 转换。
-
perspective 和 perspective-origin 用于创建透视效果，使元素在 3D 空间中呈现远近和景深感。
需要注意的是，transform 属性是一个累积的属性，即多次设置 transform 属性会叠加效果。
translation
translation这个单词看起来和transform 很像，但是控制的功能完全不一样。css动画其实和定格动画很像，如果把transform看做定格动画的每一帧，那么translation则是控制每一帧显示的时间。translation接收三个参数，分别代表转换应适用的属性，转换用的时间以及转换效果，在官方的文档上有更加详细且直观的演示，这里就不过多赘述了
transition - CSS：层叠样式表 | MDN (mozilla.org)
animation
简单来说，animation就是控制容器动画的关键帧，控制动画在什么时候执行到什么样子。但是在使用之前我们需要通过@keyframes去定义一个动画，例如以下的代码
css
@keyframes move{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}在这段代码中告诉了浏览器，用了这个动画代码的容器在动画执行到0%的时候（也就是最开始的时候）要绕着Z轴旋转0度，当动画执行到100%的时候，需要绕着Z轴旋转360度。而在容器的样式中，我们就需要通过设置animation的值去控制整个动画的执行过程，animation可以接受4个参数，分别代表执行的动画名称，执行一次消耗的时长，执行过程已经执行的效果。
css
.c{
background-color: #c7ff60;
width: 200px;
height: 50px;
margin-top: 20px;
animation: move 0.3s linear infinite;
}在这行代码中表面容器c要在0.3s内以线性效果（也就是匀速）去无限执行move动画。相对于前面两种方法来说animation无疑更加复杂，但是这就给了各位头发茂盛的程序猿更多的可能性去整活。
总结
虽然说通常情况下用css去实现某个动画效果并不常见，但是技多不压身，就比如咱们掘金PC端的个人主页就有个鼠标悬停后头像一直旋转的特效（不会还有人不知道吧）。总之，这些动画属性允许css能够创建更复杂的页面显示效果，为网页添加生动的交互和视觉效果。