JSFiddle - React, Tailwind, and code Playground

CSS allows animation of HTML elements without using JavaScript or Flash!

by ITpresent

HTML

<div></div>




























<br><br><br>

<a href="https://itpresent.com/web/css/css_animation.php" target="_blank">Example CSS Animation</a>

CSS

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@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;}
}