Animation How to - Animate background color to different colors








Question

We would like to know how to animate background color to different colors.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.test {<!--from  ww  w. j  a  v  a2s  .  c om-->
  overflow: hidden;
  text-align: center;
  font-size: 40px;
  line-height: 3;
  -webkit-animation: glow linear 1s infinite;
  animation: glow linear 1s infinite;
}

@-webkit-keyframes glow { 
   0% {background-color: red;}
   50%{background-color:orange;}
   100%{background-color:red;}
}
@keyframes glow { 
   0% {background-color: red;}
   50%{background-color:orange;}
   100%{background-color:red;}
}
</style>
</head>
<body>
  <div class="test">some text</div>
</body>
</html>

The code above is rendered as follows: