Home >Web Front-end >CSS Tutorial >How to use transition attribute
How to use transition attribute
- 青灯夜游Original
- 2019-01-30 14:44:497273browse
The transition attribute in CSS3 is a shorthand attribute used to achieve transition effects. It sets the CSS property name, completion time, speed curve and start time that need to be set for the transition effect.
CSS3 transition attribute
Function: Set the transition attribute of the element
Description: Composite attribute. Retrieves or sets the transition when the object is transformed. Used to set four transition properties: transition-property, transition-duration, transition-timing-function, transition-delay.
Syntax:
transition: property duration timing-function delay;
transition-property: Specifies the name of the CSS property that sets the transition effect.
transition-duration: Specifies how many seconds or milliseconds it takes to complete the transition effect.
transition-timing-function: Specifies the speed curve of the speed effect.
transition-delay: Defines when the transition effect starts.
Example of using CSS3 transition attribute
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>Rendering:
Above That’s the entire content of this article, I hope it will be helpful to everyone’s study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use transition attribute. For more information, please follow other related articles on the PHP Chinese website!