您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家介绍如何在CSS3中使用Transition动画属性，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
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复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition演示1</title>
<style type="text/css">
.animated_div {
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_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>
<div class="animated_div"></div>
</body>
</html>上述代码当鼠标移到div上时，CSS属性：width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式，过渡过程大致如下：
再给一个网上的嫦娥奔月的示例，要求：当鼠标移到图片上时，嫦娥出现，移开时嫦娥消失
XML/HTML Code复制内容到剪贴板
<!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动画属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。