likes
comments
collection
share

一篇文章，带你彻底搞懂CSS中的动画属性

作者站长头像
站长
· 阅读数 9

前言

在之前的文章中已经详细聊过了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无疑更加复杂，但是这就给了各位头发茂盛的程序猿更多的可能性去整活。

 

总结