Home >Web Front-end >Front-end Q&A >How to achieve element transition effect in css3
How to achieve element transition effect in css3
- WBOYOriginal
- 2022-04-28 17:17:472977browse
In CSS3, you can use the transition attribute to achieve element transition effects. This attribute can set the attribute name, transition time, transition speed and when the transition starts. The syntax is "element {transition: attribute name Time speed curve delay}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve element transition effect in css3
The transition attribute is an abbreviated attribute, used to set four transition properties:
transition-property specified settings The name of the transition effect's CSS property.
transition-duration specifies how many seconds or milliseconds it takes to complete the transition effect.
transition-timing-function Specifies the speed curve for the speed effect.
transition-delay Defines when the transition effect starts.
The syntax is:
transition: property duration timing-function delay;
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:pink;
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>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve element transition effect in css3. For more information, please follow other related articles on the PHP Chinese website!