Create Animation Using Html & Css.

Animation.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animation.css">
<title></title>
</head>
<body>
<p>This Tutorial Perform By Codes With Sunny......</p>
<div></div>
</body>
</html>

animation.css

<style> 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 50%;
  width: 100%;
  place-items: center;
  background: -webkit-linear-gradient(left, #BD3FAA, #6343BC );
}
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  animation-name: example1;
  animation-duration: 4s;
}

@keyframes example1 {
  0%   {background-color:blue; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:red; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:blue; left:0px; top:0px;}
}
</style>