Animation How to - Background Color Change Delay








Question

We would like to know how to background Color Change Delay.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--from  ww  w  .j  a va2  s  .com-->
  animation: color-change 5s 1;
  -webkit-animation: color-change 5s 1; /* Safari and Chrome */
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes color-change { 
  0% {background: #fff;}
  90%{background:#fff;}
  100%{background:#000;}
}
@-webkit-keyframes color-change /* Safari and Chrome */ { 
  0% {background: #fff;}
  90%{background:#fff;}
  100%{background:#000;}
}
</style>
</head>
<body>
  
</body>
</html>

The code above is rendered as follows: