The animation-delay property specifies a delay for the start of an animation. Here is the syntax to have a 2-seconds delay before starting the animation:
animation-delay: 2s;
HTML file: | Displayed by browser: |
---|---|
<style>
/* The element to apply the animation to */ div { width: 100px; height: 100px; position: relative; background-color: red; padding: 5px; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; animation-delay: 2s; } /* The animation code for Chrome, Safari, Opera*/ @-webkit-keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } /* The animation code in Standard syntax*/ @keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } </style> <body> <div>I wait patiently for 2 seconds before getting into action!</div> </body> |
I wait patiently for 2 seconds before getting into action!
|
Note: This example does not work in Internet Explorer 9 and earlier versions.