The W3C standard describes the transition of CSS3 in this way: "The transition of CSS allows the property value of CSS to transition smoothly within a certain time interval. This effect can be achieved when the mouse clicks, gets focus, It is triggered by a click or any change to the element, and smoothly changes the CSS attribute value with animation effect. "
css3 Transition (CSS Transition) Make the animation more vivid and realistic, let's learn together. CSS Transition.
How does it work?
CSS3 transition effects allow an element to transition from one effect to another. To do this, you must specify two things and specify the duration of the effect.
For example:
.className{
##transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Note: If not Specifying the animation delay time, the transition will have no effect as the default value is 0.
When the mouse is placed on it, the transformation starts:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
Style changes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>The following table lists all transition attributes:
##Properties
transition Abbreviation attribute, used to set four transition attributes in one attribute. 3
transition-property Specifies the name of the CSS property that applies the transition. 3
transition-duration Define the time it takes for the transition effect. The default is 0. 3
transition-timing-function Specifies the time curve of the transition effect. The default is "ease". 3
transition-delay Specifies when the transition effect starts. The default is 0. 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>需要鼠标在图片上面悬停2秒才显示效果</p>
</body>
</html>