In CSS3, the effect name of transition is "transition". This attribute is an abbreviation attribute, which is used to specify the CSS attribute name of the transition effect, the time of the transition effect, the speed curve of the transition effect and the definition of the transition effect. When it starts, the syntax is "transition: css attribute name time speed curve transition start;".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
The transition attribute is an abbreviated attribute used to set four transition properties:
transition-property
transition-duration
transition-timing-function
transition-delay
Note: Please always set the transition-duration attribute, otherwise the duration will be 0 and there will be no transition effect.
The syntax is:
transition: property duration timing-function delay;
where:
The example is as follows:
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
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 What is the name of the transition effect 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)
