Detailed explanation of the transition attribute of SS3:
This chapter introduces the usage of the transition attribute, which is also an attribute related to animation.
1. Basic knowledge:
Transition translated into Chinese means "transition", which means that the css attribute value of an element can be changed within a certain period of time. Make smooth transitions.
This attribute is a composite attribute like border, background and other attributes.
Syntax structure:
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
Parameter explanation:
1.transition-property: Set or retrieve the properties participating in the transition.
2.transition-duration: Retrieve or set the duration of object transition.
3.transition-timing-function: Retrieve or set the animation type of transition in the object.
4.transition-delay: Retrieve or set the time of object delay transition.
Code examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>The above code demonstrates how to set the width of a div from 100px to 500px with animation effect within two seconds.
Since it is a composite attribute, it is natural to set the attributes separately
Next Section