CSS Hands-on | Part 2

Animations

@keyframes rule defones an animation for an HTML elemnt
For example:

@keyframes animation_rule_name_1 {
  div.gaurav {
    from : { background-color: red; }
    to : { background-color: green; }
  }  
}

@keyframes animation_rule_name_2 {
  span.gaurav {
  	0% : { border-width : 5px; }
    10% : { border-width: 10px; } 
    40% : { border-width: 15px; }
    80% : { border-width : 20px; }
    100% : { border-width : 25px; }
  }
}

Usage:

1. Consider the first example. It will change the background-color from red to green in a linear fashion.
2. Consider the second example. The border width of an element will slowly change from 5px to 25px in a speed variable defined by the percentage

    div.gaurav {
      animation-mame: animation_rule_name_1;
      animation-duration: 10s;
      animation-iteration-count: 4;
      animation-delay: 2s;
      animation-timing-function:ease-in-out
    }
    
    span.gaurav {
      animation-mame: animation_rule_name_2;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-delay: 0s;
      animation-timing-function:ease-out;
    }

The above two code snippets will defines all the properties of the animation like

• animation-name => The name of the animation as defined in the keyframes rule
• animation-duration => The duration for which the animation will rule
• animation-itreration-count => How many times the animation will run
• animation-delay => What is the delay after which the animation will run after the eveent has been triggered
• animation-timing-function => How the speed changes during the animation from start to end of tyhe animation

The imfinite keyword says that the animation will run again and again till the browser window is closed.