首页 > 作文

css3实现动画的三种方式

更新时间:2023-04-03 19:36:44 阅读: 评论:0

这是一个考验面试者对css的基础知识。

css 实现动画主要有3种方式

第一种是: transition 实现渐变动画

第二种是: transform 转变动画

第三种是: animation 实现自定义动画

下面具体讲一下3种动画的实现方式。

transition渐变动画

我们先看一下 transition 的属性:

property:填写需要变化的css属性如:width,line-height,font-size,color等,所有作用与dom样式的属性;duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线(linear,ea,ea-in,ea-out等等)

timing-function具体的值可以看下面的表格:

值描述linear匀速(等于 cubic-bezier(0,0,1,1))ea从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))ea-in慢慢变快(等于 cubic-bezier(0.42,0,1,1))ea-out慢慢变慢(等于 cubic-bezier(0,0,0.58,1))ea-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="ba"></div>
.ba运动会稿件50字 {            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: ea-in;            transition-delay: 500ms;        /*简写*/        /*transition2015清明节放假安排: all 2s ea-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轴进行3无照驾驶处罚d旋转;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)。

<h5>transition配合transform一起使用</h5><div class="ba ba2"></div>
.ba2{          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="ba ba3"></div>
.ba3 {          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;          }      }

运行效果:

可以看到,自定义动画能实现更灵活的动画效果,包括了第一种和第二种动画的所有功能,而且属性也更全面。

以上代码可以在线体验:地址

以上就是css3实现动画的三种方式的详细内容,更多关于css3实现动画的资料请关注www.887551.com其它相关文章!

本文发布于:2023-04-03 19:36:42,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/c1ade4c97addd4fe4730ec55df13f4ad.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:css3实现动画的三种方式.doc

本文 PDF 下载地址:css3实现动画的三种方式.pdf

标签:动画   效果   自定义   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图