css3动画实现方法有多少种？用法是什么？
发布时间：2022-04-12 04:41:10 所属栏目：语言 来源：互联网
导读：css3动画实现方式有多少种？css3动画实现的方式有三种，分别是transition 实现渐变动画、 transform 转变动画、animation 实现自定义动画。接下来我们就来看看这三种方式的实现。 transition渐变动画 我们先看一下 transition 的属性： property:填写需要
|
css3动画实现方式有多少种？css3动画实现的方式有三种，分别是transition 实现渐变动画、 transform 转变动画、animation 实现自定义动画。接下来我们就来看看这三种方式的实现。 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) 下面我们看一个完整的例子： <div class="base"></div> .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; } } 运行效果： 可以看到，鼠标移上去的时候，动画延迟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为收缩比例。 <h5>transition配合transform一起使用</h5> <div class="base base2"></div> .base2{ transform:none; transition-property: transform; &:hover { transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px); } } 运行效果： 可以看到盒子发生了旋转，倾斜，平移，放大。 animation自定义动画 为了实现更灵活的动画效果，css3还提供了自定义动画的功能。 (1) name：需要绑定到选择器的keyframe名称。 (2) duration：完成该动画需要花费的时间，秒或毫秒。 (3) timing-function：跟transition-linear一样。 (4) delay：设置动画在开始之前的延迟。 (5) iteration-count：设置动画执行的次数，infinite为无限次循环。 (6) direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。 <h5 class="title">animate自定义动画</h5> <div class="base base3"></div> .base3 { border-radius: 50%; transform:none; position: relative; width: 100px; height: 100px; background: linear-gradient( 35deg, #ccffff, #ffcccc ); &:hover { animation-name: bounce; animation-duration: 3s; animation-iteration-count: infinite; } } @keyframes bounce{ 0% { top: 0px; } 50% { top: 249px; width: 130px; height: 70px; } 100% { top: 0px; } } （编辑：宁德站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
