css3实现动画有几种方式?
作者: 图恩分类: 编程开发阅读: 591发布时间: 2020-05-09 04:53:32
这是一个考验面试者对css的基础知识。
css实现动画主要有3种方式,第一种是:transition实现渐变动画,第二种是:transform转变动画,第三种是:animation实现自定义动画,下面具体讲一下3种动画的实现方式。
transition渐变动画
我们先看一下transition的属性:
property:填写需要变化的css属性如:width,line-height,font-size,color等,所有作用与dom样式的属性;
duration:完成过渡效果需要的时间单位(s或者ms)
timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)
timing-function具体的值可以看下面的表格:
值
描述
linear
匀速(等于 cubic-bezier(0,0,1,1))
ease
从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in
慢慢变快(等于 cubic-bezier(0.42,0,1,1))
ease-out
慢慢变慢(等于 cubic-bezier(0,0,0.58,1))
ease-in-out
先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1)),渐显渐隐效果
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
delay: 动画效果的延迟触发时间(单位ms或者s)
下面我们看一个完整的例子:
.base {
width: 100px;
height: 100px;
display: inline-block;
background-color: #0EA9FF;
border-width: 5px;
border-style: solid;
border-color: #5daf34;
transition-property: width,height,background-color,border-width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
/*简写*/
/*transition: all 2s ease-in 500ms;*/
&:hover {
width: 200px;
height: 200px;
background-color: #5daf34;
border-width: 10px;
border-color: #3a8ee6;
}
}
运行效果:
2020年4月29日1.gif
可以看到,鼠标移上去的时候,动画延迟0.5s开始,并且由于border-color没有设置到transition-property里面,所以是没有渐变动画的。
transform转变动画
transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用。
none:定义不进行任何转换,一般用于注册掉该转换。
transform-functions:定义要进行转换的类型函数。主要有:
2.1 旋转(rotate):主要分为2D旋转和3D旋转。rotate(angle),2D 旋转,参数为角度,如45deg;rotate(x,y,z,angle),3D旋转,围绕原地到(x,y,z)的直线进行3D旋转;rotateX(angle),沿着X轴进行3D旋转;rotateY(angle);rotateZ(angle);
2.2 缩放(scale):一般用于元素的大小收缩设定。主要类型同上,有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z),其中x、y、z为收缩比例。
2.3 倾斜(skew):主要用于对元素的样式倾斜。skew(x-angle, y-angle),沿着x和y轴的2D倾斜转换;skewX(angle),沿着x轴的2D倾斜转换;skew(angle),沿着y轴的2D倾斜转换。
2.4 移动(translate):主要用于将元素移动。translate(x, y),定义向x和y轴移动的像素点;translate(x, y, z),定义像x、y、z轴移动的像素点;translateX(x);translateY(y);translateZ(z)。
发表评论 (审核通过后显示评论):