这篇文章将为大家详细讲解有关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>
-
<div id="block">
-
-
</div>
-
</body>
-
</html>
transitionDemo.html
XML/HTML Code复制内容到剪贴板
-
<!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>
-
<div id="wrapper">
-
<p>linear</p>
-
<div class="progress-bar-bg">
-
<div class="progress-bar" id="bar1"></div>
-
</div>
-
-
<p>ease</p>
-
<div class="progress-bar" id="bar2"></div>
-
-
<p>ease-in</p>
-
<div class="progress-bar" id="bar3"></div>
-
-
<p>ease-out</p>
-
<div class="progress-bar" id="bar4"></div>
-
-
<p>ease-in-out</p>
-
<div class="progress-bar" id="bar5"></div>
-
</div>
-
</body>
-
</html>
关于CSS3中怎么实现过渡transition效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
