Home >Web Front-end >Front-end Q&A >How to use css transition-delay property

How to use css transition-delay property

藏色散人
藏色散人Original
2019-05-30 09:20:462932browse

css transition-delay attribute is used to specify when the transition effect starts. The transition-delay value is in seconds or milliseconds. The syntax is transition-delay: time.

How to use css transition-delay property

How to use the css transition-delay property?

Function: The transition-delay attribute specifies when the transition effect starts. The transition-delay value is in seconds or milliseconds.

Syntax:

transition-delay: time

Description:

time Specifies the time to wait before the transition effect starts, in seconds or milliseconds.​

Note:

Internet Explorer 10, Firefox, Opera and Chrome support the transition-delay attribute.

Safari supports an alternative -webkit-transition-delay property.

Note:

Internet Explorer 9 and earlier browsers do not support the transition-delay attribute.

css transition-delay property usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition-property:width;
transition-duration:5s;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width; 
-moz-transition-duration:5s;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width; 
-webkit-transition-duration:5s;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:5s;
-o-transition-delay:2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
<p><b>注释:</b>过渡效果会在开始前等待两秒钟。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

Effect output:

How to use css transition-delay property

The above is the detailed content of How to use css transition-delay property. For more information, please follow other related articles on the PHP Chinese website!

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