animation7.html

<!DOCTYPE html>
<html>
<head>
<style> 

div {
  /* animation properties */
  animation-name: my-animation;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
  /* other properties */
  width: 300px;
  height: 100px;
  border-radius: 10px;
  position: absolute;
  left: 0; 
  right: 0; 
  margin-left: auto;
  margin-right: auto; 

}

@keyframes my-animation {
  from {
    background-color: #ff7a59;
    width: 300px;
    top: 10px;
  }
  to {
    background-color: #33475b;
    width: 50px;
    top: 100px;
  }
}


</style>
</head>
<body>

<h1>CSS Animation</h1>

<p> this is an animation of rectangular box expanding and narrowing with color changing </p>

<div></div>

</body>
</html>