How to set the delay for css3 animation for a few seconds-Front-end Q&A-php.cn

Table of Contents

How to set the delay for a few seconds in css3 animation

Home

Web Front-end

Front-end Q&A

How to set the delay for css3 animation for a few seconds

Mar 16, 2022 am 11:35 AM

css

In CSS3, you can use the "animation-delay" attribute to set the animation delay for a few seconds. The function of this attribute is to define when the animation starts. The unit of the attribute value can be seconds "s" or milliseconds. ms", the syntax is "animation-delay: time;".

How to set the delay for css3 animation for a few seconds

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the delay for a few seconds in css3 animation

The animation-delay property defines when the animation starts.

animation-delay value unit can be seconds (s) or milliseconds (ms).

Tips: Negative values are allowed, -2s causes the animation to start immediately, but skips 2 seconds to enter the animation.

Syntax

animation-delay: time;

Copy after login

time is optional. Defines the time, in seconds or milliseconds, to wait before the animation starts. The default value is 0

The example is as follows;

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    animation-delay:3s;
    /*Safari 和 Chrome*/
    -webkit-animation:mymove 5s infinite;
    -webkit-animation-delay:3s;
}
@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes mymove /*Safari 和 Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>animation-delay 属性不兼容 Internet Explorer 9以及更早版本的浏览器。</p>
<div></div>
</body>
</html>

Copy after login

The animation of the output result is delayed by 3 seconds, and the result is as follows:

How to set the delay for css3 animation for a few seconds

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the delay for css3 animation for a few seconds. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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