In css3, the transition attribute transition is used to set the element transition effect. It is an abbreviated attribute with the syntax "transition:property duration timing-function delay". The attribute value sets the attribute name, time, speed and speed of the element transition respectively. delay.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the usage of transition in css3
In css, the transition attribute is transition, which is used to set the transition effect of an element.
The transition attribute sets the transition effect of the element. The four abbreviated attributes are:
transition-property
transition-duration
transition-timing-function
transition-delay
They fenbie is used to set the element The attribute name, transition time, transition speed curve and transition delay time of the transition effect.
The syntax is:
transition: property duration timing-function delay;
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>Output result:
(Learning video Share: css video tutorial)
The above is the detailed content of What is the usage of transition in css3. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
