How to achieve element transition effect in css3-Front-end Q&A-php.cn

How to achieve element transition effect in css3

WBOY

Release： 2022-04-28 17:17:47

Original

2979 people have browsed it

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}".

How to achieve element transition effect in css3

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;

Copy after login

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>

Copy after login

Output result:

How to achieve element transition effect in css3

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