Home > Article > Web Front-end > What is the usage of transition in css3

What is the usage of transition in css3

WBOYOriginal: 2021-12-21 16:56:292471browse

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:

What is the usage of transition in css3

(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!

html5 css css3 Property function transition

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The most easy-to-understand detailed explanation of CSS float attribute (detailed pictures and text)Next article：The most easy-to-understand detailed explanation of CSS float attribute (detailed pictures and text)

See more

What is the usage of transition in css3

Related articles