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

前言

在之前的文章中已经详细聊过了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能够创建更复杂的页面显示效果,为网页添加生动的交互和视觉效果。

原文链接:https://juejin.cn/post/7344089411983966234 作者:我真的很困

(0)
上一篇 2024年3月9日 下午5:13
下一篇 2024年3月10日 上午10:05

相关推荐

发表评论

登录后才能评论