HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><!-- Declare character encoding -->
<title>How to animation-delay use, then start the animation</title><!-- Set the title of the HTML document -->
</head>
<body>
<div class="animation"><!-- Container for the animated element -->
<div class="w3r"><!-- Division element for text content -->
w3resource Tutorial
</div>
</div>
<style type="text/css"> /* CSS style start*/
div {
width: 100px; /* Set width of the animated element */
height: 100px; /* Set height of the animated element */
background: #33FFFF; /* Set background color of the animated element */
position: relative; /* Set position property to relative */
-webkit-animation: move 5s infinite; /* Chrome, Safari, Opera */ /* Apply animation to the element for Webkit browsers */
-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */ /* Delay the start of the animation for Webkit browsers */
animation: move 5s infinite; /* Apply animation to the element */
animation-delay: 5s; /* Delay the start of the animation */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes move { /* Define keyframes for the animation in Webkit browsers */
from {left: 0px;} /* Define initial state of the animation */
to {left: 100px;} /* Define final state of the animation */
}
@keyframes move { /* Define keyframes for the animation */
from {left: 0px;} /* Define initial state of the animation */
to {left: 100px;} /* Define final state of the animation */
}
</style>
</body>
</html>
Explanation:
Live Demo:
See the Pen animation-delay-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4