CSS3 ??
CSS3 Transition
CSS3 Transition
CSS3??? Flash ??????? JavaScript? ???? ??? ? ????? ?? ???? ???? ?? ??? ??? ? ????.
??? ??????
CSS3 ??? ??? ? ????? ?? ???? ????? ???? ?????.
?? ????? ?? ? ??? ???? ???.
??? ??? CSS ??? ???? ?? ?? ??? ?????.
<!DOCTYPE html>
<html>
<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>
<div id="bar1"></div>
</div>
<p>ease</p>
<div id="bar2"></div>
<p>ease-in</p>
<div id="bar3"></div>
<p>ease-out</p>
<div id="bar4"></div>
<p>ease-in-out</p>
<div id="bar5"></div>
</div>
</body>
</html>?? ??
?? ???? ?? ??? ????? ??? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>該實(shí)例無(wú)法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠標(biāo)移動(dòng)到圖標(biāo)上，查看過(guò)渡效果。</div>
</body>
</html>?? ??
?? ??? ?? ?? ??? ?????? ????. ? ? ? ? ? ? ? ? ? ? ? ??? ? ?? ?? ??? ??? ?? ??. 3
Transition-ProPERTY? ??? CSS ?? ??? ?????. 3
transition-delay ?? ??? ???? ??? ?????. ???? 0???. ~ ~
