CSS Animations
CSS animations is used to create the animation without JavaScript, Jquery and Flash. CSS and the HTML code is generated animations.

Animation Properties: animation, animation-delay, animation-direction, animation-duration,animation-fill-mode.

animation-name: @keyframes name.
Example : @-webkit-keyframes color-change { 50% { background:red;} 100% { background:green;} }
animation-name:color-change;

animation-duration: Animation complte in time. ( defined in seconds(s) or milliseconds(ms))
Example : animation-duration:8s;

animation-timing-function: It will define the speed of animation. ( ease, ease-in, ease-out, and linear)
Example : animation-timing-function: ease;

animation-delay: animation start time. ( defined in seconds(s) or milliseconds(ms))
Example : animation-delay:2s;( Animation start afrer 2sec on load page.)

animation-direction:
Type:normal, reverse, alternate, alternate-reverse

animation-iteration-count: Animation repeat time.
Example :animation-iteration-count:2; (Animation repeat 2 times)

animation-fill-mode: none,forwards,backwards,both,initial,inherit.

<style> 
.box-move { 
       width:150px;
       height:150px;
       background:#2B4A80;
       border-radius:100%;
       margin:10px;
       animation-name:move;
       animation-duration:3s;
       animation-delay:1s;
       animation-iteration-count:5;
       -webkit-animation-name:move; /* Prefix for Safari and Chrome */
       -webkit-animation-duration:3s;
       -webkit-animation-delay:1s;
       -webkit-animation-iteration-count:20;
       }
/*--------------------------------*/
.box-color {
      width:150px;
      height:150px;
      background:#2B4A80;
      animation-name:box-color;
      animation-duration:2s;
      animation-delay:1s;
      animation-iteration-count:5;
     -webkit-animation-name:box-color; /* Prefix for Safari and Chrome */
     -webkit-animation-duration:2s;
     -webkit-animation-delay:1s;
     -webkit-animation-iteration-count:20;
			
     }
/*--------------------------------*/
@keyframes move {
     0% {transform:translate(0px); animation-timing-function:ease-in-out;}
     100% {transform:translate(200px); animation-timing-function:ease-in-out;}
     }

@-webkit-keyframes move /* Prefix for Safari and Chrome */ { 
    0% {-webkit-transform:translate(0px); -webkit-animation-timing-function:ease-in-out;}
    100% {-webkit-transform:translate(200px); -webkit-animation-timing-function:ease-in-out;}
    }
/*--------------------------------*/
@keyframes box-color {
   0% {background:#FF0000;}
   100% {background:#FFFA07;}
   }
@-webkit-keyframes box-color /* Prefix for Safari and Chrome */ {
   0% {background:#FF0000;}
   100% {background:#FFFA07;}
   }
 </style>
 <body>
	 <div class="box-move"></div>
	 <div class="box-color"></div>
</body>

Related posts:

Categories: CSS, How to

Leave a Reply