css3实现动画有几种方式？
时间：2023-03-30 22:20:05
CSS
这是考验面试官css基础知识的。用css实现动画主要有3种方式。第一个是：transition实现渐变动画，第二个是：transform实现变换动画，第三个是：animation实现自定义动画。下面详细说说这三种动画的实现。TransitionGradientAnimation先来看看transition的属性：property：填写需要改变的css属性，比如：width、line-height、font-size、color等，所有作用于dom样式的属性;duration：完成过渡效果所需的时间单位（s或ms）可以看下表：数值说明线性匀速（等于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:100像素；高度：100px；显示：内联块；背景色：#0EA9FF；边框宽度：5px；边框样式：实心；边框颜色：#5daf34；边框宽度；过渡持续时间：2s；过渡计时功能：缓入；转换延迟：500ms；/*速记*//*transition:all2sease-in500ms;*/&:hover{width:200px;高度：200px；背景色：#5daf34；边框宽度：10px；边框颜色：#3a8ee6；}}运行效果：可以看到当鼠标向上移动时，动画开始延迟0.5s，并且由于transition-property中没有设置border-color，所以没有渐变动画。transform为transform属性设置动画以应用2D或3D转换。该属性允许我们对元素执行四种类型的操作，例如旋转、缩放、倾斜和移动。它通常与过渡属性一起使用。none：定义不进行任何转换，一般用于注册转换。transform-functions：定义要转换的类型函数。主要包括：2.1Rotate：主要分为2D旋转和3D旋转。rotate(angle)，二维旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，从原来的地方绕线3D旋转到(x,y,z)；rotateX(angle)，沿X轴的3D旋转；旋转Y（角度）；旋转Z（角度）；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轴的二维倾斜变换；skew(angle)，沿y轴的2D倾斜变换。2.4Move(翻译)：主要用来移动元素。translate(x,y)，定义移动到x和y轴的像素；translate(x,y,z)，定义像x,y,z轴一样移动的像素；翻译X（x）；翻译Y(y);翻译Z(z)。
transition与transform一起使用
.base2{transform:none;过渡属性：变换；&:hover{变换：缩放(0.8,1.5)旋转(35deg)倾斜(5deg)平移(15px,25px);}}运行效果：可以看到盒子进行了旋转、倾斜、平移、放大。animation自定义动画为了实现更灵活的动画效果，css3也提供了自定义动画的功能。(1)name：需要绑定到selector的关键帧的名称。(2)duration：完成动画所花费的时间，以秒或毫秒为单位。(3)timing-function：同transition-linear。(4)delay：设置动画开始前的延迟时间。(5)iteration-count：设置动画执行的次数，infinite为无限循环。(6)direction：是否反向轮询动画。normal，默认值，动画应该正常播放；alternate，动画要依次倒着播放。
