JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<h1>The animation-delay Property</h1>

<p>Start the animation after 2 seconds:</p>
<div class="red-bx"></div>
<div class="yellow-bx"></div>

<p><strong>Note:</strong> The animation-delay property is not supported in Internet Explorer 9 and earlier versions.</p>

CSS

.red-bx {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
  animation-delay: 2s;
}

.yellow-bx {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 4s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
  animation-delay: 6s;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {left: 0px; display:hide;}
  to {left: 200px; display:show;}
}

@keyframes mymove {
  from {left: 0px; display:hide;}
  to {left: 200px; display:show;}
}