前言
在之前的文章中已经详细聊过了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去定义一个动画,例如以下的代码
@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 作者:我真的很困