CSS3 transition
CSS3 Transition
CSS3 Transition
In CSS3, we can change from one style to another in order to add a certain effect without using Flash animation or JavaScript.
How does it work?
CSS3 Transition is the effect of an element gradually changing from one style to another.
To achieve this, two things must be specified:
Specify the CSS property to add the effect and specify the duration of the effect.
<!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>Multiple changes
To add multiple styles of transformation effects, the added attributes are separated by commas:
<!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>Transition attributes
The following table lists All transition attributes are listed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<p><b>注意：</b>該實(shí)例無(wú)法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠標(biāo)移動(dòng)到 div 元素上，查看過(guò)渡效果。</p>
<p><b>注意：</b> 過(guò)渡效果需要等待兩秒后才開(kāi)始。</p>
</body>
</html>
