Post
Ask Question

Animation Timing Function in CSS3

Introduction

 
It specifies the speed curve of the animation. The animation-timing-function uses a mathematical function, called the Cubic Bezier curve, to make the speed curve.
 
Syntax 
 
animation-timing-function: value;
 
It has five values: linear, ease, ease-in, ease-out, ease-in-out. Here we discuss all the values of animation-timing-function.
  1. linear: In this case, the animation has the same speed from start to end.
  2. ease: This is the default value. In this case, the animation has a slow start, then fast, before it ends slowly.
  3. ease-in: In this case, the animation has a slow start.
  4. ease-out: In this case, the animation has a slow end.
  5. ease-in-out: In this case, the animation has both a slow start and a slow end.
  1. <html>  
  2.   
  3.     <head>  
  4.         <style type="text/css">  
  5.         div {  
  6.             width: 50px;  
  7.             height: 50px;  
  8.             background: pink;  
  9.             color: black;  
  10.             font-weight: bold;  
  11.             position: relative;  
  12.             animation: myfirstmove 5s infinite;  
  13.             -webkit-animation: myfirstmove 5s infinite;  
  14.             /* Safari and Google Chrome */  
  15.         }  
  16.  
  17.         #div1 {  
  18.             animation-timing-function: linear;  
  19.         }  
  20.  
  21.         #div2 {  
  22.             animation-timing-function: ease;  
  23.         }  
  24.  
  25.         #div3 {  
  26.             animation-timing-function: ease-in;  
  27.         }  
  28.  
  29.         #div4 {  
  30.             animation-timing-function: ease-out;  
  31.         }  
  32.  
  33.         #div5 {  
  34.             animation-timing-function: ease-in-out;  
  35.         }  
  36.   
  37.         /* The following Code is for Safari and Google Chrome: */  
  38.         #div1 {  
  39.             -webkit-animation-timing-function: linear;  
  40.         }  
  41.  
  42.         #div2 {  
  43.             -webkit-animation-timing-function: ease;  
  44.         }  
  45.  
  46.         #div3 {  
  47.             -webkit-animation-timing-function: ease-in;  
  48.         }  
  49.  
  50.         #div4 {  
  51.             -webkit-animation-timing-function: ease-out;  
  52.         }  
  53.  
  54.         #div5 {  
  55.             -webkit-animation-timing-function: ease-in-out;  
  56.         }  
  57.   
  58.         @keyframes myfirstmove {  
  59.             from {  
  60.                 left: 10px;  
  61.             }  
  62.   
  63.             to {  
  64.                 left: 250px;  
  65.             }  
  66.         }  
  67.   
  68.         @-webkit-keyframes myfirstmove  
  69.   
  70.         /* Safari and Google Chrome */  
  71.             {  
  72.             from {  
  73.                 left: 10px;  
  74.             }  
  75.   
  76.             to {  
  77.                 left: 250px;  
  78.             }  
  79.         }  
  80.         </style>  
  81.     </head>  
  82.   
  83.     <body>  
  84.         <div id="div1">My</div>  
  85.         <div id="div2">Name</div>  
  86.         <div id="div3">is</div>  
  87.         <div id="div4">Mahak</div>  
  88.         <div id="div5">Gupta</div>  
  89.     </body>  
  90.   
  91. </html> 


Similar Articles