CSS3中Transition动画属性用法详解

时间:2021-05-08

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

transition属性的值包括以下四个:

•transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。
•transition-duration:指定属性过渡的持续时间
•transition-timing-function:指定渐变的速度:
1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
•transition-delay:指定延迟时间,也就是经过多长时间才开始执行过渡过程。
浏览器兼容性

Internet Explorer 9 以及更早的版本,不支持 transition 属性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。

下面还是以实例来说明transition的用法

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>transition演示1</title>
  • <styletype="text/css">
  • .animated_div{
  • margin:100pxauto;
  • width:100px;
  • height:60px;
  • background:#92B901;
  • -webkit-transition:-webkit-transform1s,opacity1s,background1s,width1s,height1s,font-size1s;
  • transition-property:width,height,transform,background,opacity;
  • transition-duration:1s,1s,1s,1s,1s,1s;
  • -webkit-border-radius:5px;
  • border-radius:5px;
  • opacity:0.4;
  • }
  • .animated_div:hover{
  • -moz-transform:rotate(360deg);
  • -webkit-transform:rotate(360deg);
  • -o-transform:rotate(360deg);
  • transform:rotate(360deg);
  • opacity:1;
  • background:#1ec7e6;
  • width:200px;
  • height:120px;
  • }
  • </style>
  • </head>
  • <body>
  • <divclass="animated_div"></div>
  • </body>
  • </html>
  • 上述代码当鼠标移到div上时,CSS属性:width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式,过渡过程大致如下:

    再给一个网上的嫦娥奔月的示例,要求:当鼠标移到图片上时,嫦娥出现,移开时嫦娥消失

    XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metacharset="utf-8">
  • <title>transition演示2</title>
  • <styletype="text/css">
  • body{
  • color:#fff;
  • background:#000;
  • }
  • .change{
  • display:block;
  • width:400px;
  • height:400px;
  • background:url(http://p3.qhimg.com/t0134c65e59012a1257.png)no-repeatcenter;
  • background-size:cover;
  • border:1emsolidrgba(255,255,255,.8);
  • margin:50pxauto;
  • }
  • .changeimg{
  • display:block;
  • width:300px;
  • height:284px;
  • opacity:0;
  • -webkit-transform:translate(-100px,-100px);
  • transform:translate(-100px,-100px);
  • -webkit-transition:opacity1sease-in-out0.5s,-webkit-transform1sease-in-out;
  • transition:opacity1sease-in-out0.5s,transform1sease-in-out;
  • }
  • .change:hoverimg{
  • -webkit-transform:translate(0px,0px);
  • transform:translate(0px,0px);
  • opacity:1;
  • }
  • </style>
  • </head>
  • <body>
  • <ahref="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www"class="change"target="_blank">
  • <imgsrc="http://p4.qhimg.com/t0160e6a92121691e22.png"alt=""/>
  • </a>
  • </body>
  • </html>
  • 为了使嫦娥有飘入飘出的效果,设置了transform属性,配合opacity属性,加入过渡效果就能达到效果:

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章