CSS3中Transition动画属性的用法介绍

2020-11-27 来源：我们爱旅游

这篇文章主要为大家详细介绍了CSS3中Transition动画属性用法，教大家如何使用Transition动画，感兴趣的小伙伴们可以参考一下

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的用法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>transition演示1</title>
 <style type="text/css">
 .animated_p { 
 margin: 100px auto; 
 width:100px; 
 height:60px; 
 background:#92B901; 
 /*简写属性*/ 
 -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */ 
 /*每个属性分开写*/ 
 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_p: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>
<p class="animated_p"></p>
</body>
</html>

上述代码当鼠标移到p上时，CSS属性：width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_p里定义的样式，过渡过程大致如下：

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>transition演示2</title>
 <style type="text/css">
 body{ 
 color: #fff; 
 background:#000; 
 } 
 .change{ 
 display:block; 
 width:400px; 
 height:400px; 
 background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center; 
 background-size:cover; 
 border:1em solid rgba(255,255,255,.8); 
 margin:50px auto; 
 } 
 .change img{ 
 display:block; 
 width:300px; 
 height:284px; 
 opacity:0; 
 -webkit-transform:translate(-100px,-100px); 
 transform:translate(-100px,-100px); 
 -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; 
 transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out; 
 } 
 .change:hover img{ 
 -webkit-transform:translate(0px,0px); 
 transform:translate(0px,0px); 
 opacity:1; 
 } 
 </style>
</head>
<body>
 <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
 <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
 </a>
</body>
</html>

为了使嫦娥有飘入飘出的效果，设置了transform属性，配合opacity属性，加入过渡效果就能达到效果：

全部栏目

CSS3中Transition动画属性的用法介绍