使用CSS3过渡transition效果实例介绍

时间：2020-11-27 来源：智榕旅游

这篇文章主要为大家详细介绍了CSS3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下

效果图：

实现代码：

transition.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Transition</title>
 <style>
 #block { 
 width: 400px; 
 height: 300px; 
 background-color: #69C; 
 margin: 0 auto; 

 transition: background-color 1s, width 0.5s ease-out; 
 -webkit-transition: background-color 1s, width 0.5s ease-out; 
 } 
 #block:hover { 
 background-color: red; 
 width: 600px; 
 } 
 </style>
</head>
<body>
 <p id="block">

 </p>
</body>
</html>

transitionDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>TransitionDemo</title>
 <style>
 #wrapper { 
 width: 1024px; 
 margin: 0 auto; 
 } 
 .progress-bar-bg { 
 width: 960px; 
 /*background-color: aliceblue;*/ 
 background-color: lightyellow; 
 } 
 .progress-bar { 
 height: 40px; 
 width: 40px; 
 background-color: #69C; 

 border: 1px solid lightyellow; 
 border-radius: 5px; 
 } 
 .progress-bar:hover { 
 width: 960px; 
 } 

 #bar1 { 
 -webkit-transition: width 5s linear; 
 /*-webkit-transition: width 5s steps(6, end);*/ 
 /*-webkit-transition: width 5s step-start;*/ 
 } 
 #bar2 { 
 -webkit-transition: width 5s ease; 
 } 
 #bar3 { 
 -webkit-transition: width 5s ease-in; 
 } 
 #bar4 { 
 -webkit-transition: width 5s ease-out; 
 } 
 #bar5 { 
 -webkit-transition: width 5s ease-in-out; 
 } 
 </style>
</head>
<body>
<p id="wrapper">
 <p>linear</p>
 <p class="progress-bar-bg">
 <p class="progress-bar" id="bar1"></p>
 </p>

 <p>ease</p>
 <p class="progress-bar" id="bar2"></p>

 <p>ease-in</p>
 <p class="progress-bar" id="bar3"></p>

 <p>ease-out</p>
 <p class="progress-bar" id="bar4"></p>

 <p>ease-in-out</p>
 <p class="progress-bar" id="bar5"></p>
</p>
</body>
</html>

结果分析：鼠标移动上去后，会发生过渡动画。