All the animation effect is controlled by

and it provides very smooth animation effect.









Lets see the complete example for scale in and scale out animation effect.

<html> <head> <style> . spinner { width : 100px ; height : 100px ; position : relative ; margin : 100px auto ; } . double - bounce1 , . double - bounce2 { width : 100 %; height : 100 %; border - radius : 50 %; background - color : #42a5f5; opacity : 0.6 ; position : absolute ; top : 0 ; left : 0 ; - webkit - animation : sk - bounce 2.0s infinite ease - in - out ; animation : sk - bounce 2.0s infinite ease - in - out ; } . double - bounce2 { - webkit - animation - delay : - 1.0s ; animation - delay : - 1.0s ; } @keyframes sk - bounce { 0 %, 100 % { transform : scale ( 0.0 ); - webkit - transform : scale ( 0.0 ); } 50 % { transform : scale ( 1.0 ); - webkit - transform : scale ( 1.0 ); background - color : #ec407a; } } </style> </head> <body> <div class = "spinner" > <div class = "double-bounce1" ></div> <div class = "double-bounce2" ></div> </div> </body> </html>





output :









Video Link :









Download Link :





You can use this animation effect during the ajax loading.

This all about circle scale in and out animation effect using css3. in case of any questions, please do Comments in comment Box below.

This post explain. Here we are usingto performandanimation effect.