前言

在之前的文章中现已具体聊过了CSS中常用的定位布局之类的知识点，但架不住不按常理出牌的面试官总能问到点奇奇怪怪的问题，就比方这种好几年都不见得用得上的CSS动画特点。今天就用一篇文章来带各位彻底搞明白CSS中的这些动画特点。

正文

transform

  1. Transform
    这一特点通常是用于操控容器的旋转，平移，缩放以及歪斜作用，信任常常切页面的各位对这个特点应该不陌生，毕竟常常切页面的各位小伙伴会用到这个特点transform：translat（-50%，-50%）把容器向左向上各平移自身的50%去做容器的居中。除此之外还有一些transform常常用到的特点值：

  2. scale
    于缩放元素，承受一个参数，表明水平缓笔直方向上的缩放比例。例如，scale(2, 1.5)将元素在水平方向上扩大两倍，在笔直方向上扩大 1.5 倍。

  3. rotate
    用于旋转元素，承受一个参数，表明旋转角度。角度可以用度数（deg）或弧度（rad）表明。例如，rotate(45deg)将元素顺时针旋转 45 度。

  4. skew
    用于斜切元素，承受两个参数，别离表明水平缓笔直方向上的斜切角度。例如，skew(10deg, -5deg)将元素水平方向上斜切 10 度，笔直方向上斜切 -5 度。

除了以上常用的函数之外，还有其他一些函数和特点可以与 transform 特点一同运用，例如：

  1. transform-style
    用于指定元素的子元素如何在 3D 空间中进行变换。默认为flat，表明子元素不会承继父元素的 3D 转换。

  2. perspective和perspective-origin
    用于创立透视作用，使元素在 3D 空间中呈现远近和景深感。

需求注意的是，transform 特点是一个累积的特点，即屡次设置 transform 特点会叠加作用。

translation

translation这个单词看起来和transform 很像，可是操控的功能彻底不一样。css动画其实和定格动画很像，如果把transform看做定格动画的每一帧，那么translation则是操控每一帧显现的时刻。translation接纳三个参数，别离代表转换应适用的特点，转换用的时刻以及转换作用，在官方的文档上有愈加具体且直观的演示，这里就不过多赘述了

transition – CSS：层叠样式表 | MDN (mozilla.org)

animation

简略来说，animation便是操控容器动画的关键帧，操控动画在什么时分履行到什么姿态。可是在运用之前我们需求经过@keyframes去定义一个动画，例如以下的代码


        @keyframes move{
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
            }

在这段代码中告诉了浏览器，用了这个动画代码的容器在动画履行到0%的时分（也便是最开始的时分）要绕着Z轴旋转0度，当动画履行到100%的时分，需求绕着Z轴旋转360度。而在容器的样式中，我们就需求经过设置animation的值去操控整个动画的履行进程，animation可以承受4个参数，别离代表履行的动画称号，履行一次耗费的时长，履行进程现已履行的作用。

.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能够创立更复杂的页面显现作用，为网页添加生动的交互和视觉作用。