Previous chapter (CSS3 Effects - Transitions)Next chapter (CSS3 Effects - Font face)

CSS Animation with time frames

This animation allows to add time to animation effect.

Other examples in Animations (CSS3 Effects)

Result from the Online TryIt-Editor

<!doctype html>
<html>
  <head>
    <title>HtmlNest.com live html example</title>
    <style type="text/css">
      .time{
        height:200px;
        width:200px;
        background-color:#F00;
        animation:t_duration 10s;
        -moz-animation:t_duration 10s;
        -webkit-animation:t_duration 10s;
      }
      @keyframes t_duration
      {
        0%   {
          background: #030;
        }
        10%  {
          background: #90F;
        }
        20%  {
          background: #096;
        }
        30% {
          background: #99F;
        }
        40% {
          background: #FF6;
        }
        50% {
          background: #63F;
        }
        60% {
          background: #3C3;
        }
        70% {
          background: #900;
        }
        80% {
          background: #999;
        }
        90% {
          background: #F09;
        }
        100%{
          background:#C90;
        }
      }
      
      @-moz-keyframes t_duration
      {
        0%   {
          background: #030;
        }
        10%  {
          background: #90F;
        }
        20%  {
          background: #096;
        }
        30% {
          background: #99F;
        }
        40% {
          background: #FF6;
        }
        50% {
          background: #63F;
        }
        60% {
          background: #3C3;
        }
        70% {
          background: #900;
        }
        80% {
          background: #999;
        }
        90% {
          background: #F09;
        }
        100%{
          background:#C90;
        }
      }
      
      @-webkit-keyframes t_duration
      {
        0%   {
          background: #030;
        }
        10%  {
          background: #90F;
        }
        20%  {
          background: #096;
        }
        30% {
          background: #99F;
        }
        40% {
          background: #FF6;
        }
        50% {
          background: #63F;
        }
        60% {
          background: #3C3;
        }
        70% {
          background: #900;
        }
        80% {
          background: #999;
        }
        90% {
          background: #F09;
        }
        100%{
          background:#C90;
        }
      }
    </style>
  </head>
  
  <body>
    <h3>
      CSS Animation with time frames
    </h3>
    <br />
    <div class="time">
    </div>
  </body>
</html>

^1.0

^4.0

^5.0

^10.0

^12.0

CSS Animation with time frames

Useful Information