Animation Timing Function in CSS3

Submitted by alpha_luna on Wednesday, May 6, 2015 - 23:33.

Good day!

In this tutorial, we are going to learn about animation-timing-function. What is animation-timing-function? animation-timing-function property specifies the speed curve of the animation. The speed curve defines the amount of time an animation uses to change from one set of CSS styles to another. Syntax of this property: animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier (n,n,n,n) | initial | inherit ; Property Values linear - specifies that the animation has the same speed from start to end. ease - specifies that the animation starts slowly, then fast, then ends slowly. (The default value of this property is ease). ease-in - specifies that the animation starts slowly. ease-out - specifies that the animation ends slowly. ease-in-out - specifies that the animation starts and ends slowly. cubic-bezier (n,n,n,n) - allows specification of values in the cubic-bezier function. Possible values are numeric values from 0 to 1. initial - specifies that the value of the property should be set to the default value. inherit - specifies that the value of the property should be inherited from the parent element. Example This example shows the use of the animation-timing-function property. 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS3 animation-timing-function</title>
  5.  
  6. <style type="text/css"> 
  7.  
  8. div.animate {
  9.   width:50px;
  10.   height:50px;
  11.   color:white;
  12.   padding:2px;
  13.   background:#312abc;
  14.   position:relative;
  15.   animation:boxmove 5s infinite;
  16.   /* Firefox */
  17.   -moz-animation:boxmove 5s infinite;
  18.   /* Safari and Google Chrome */
  19.   -webkit-animation:boxmove 5s infinite;
  20. }
  21. #test1 {
  22.   animation-timing-function:linear;
  23.   /* Firefox */
  24.   -moz-animation-timing-function:linear;
  25.   /* Safari and Google Chrome */
  26.   -webkit-animation-timing-function:linear;
  27. }
  28. #test2 {
  29.   animation-timing-function:ease;
  30.   /* Firefox */
  31.   -moz-animation-timing-function:ease;
  32.   /* Safari and Google Chrome */
  33.   -webkit-animation-timing-function:ease;
  34. }
  35. #test3 {
  36.   animation-timing-function:ease-in;
  37.   /* Firefox */
  38.   -moz-animation-timing-function:ease-in;
  39.   /* Safari and Google Chrome */
  40.   -webkit-animation-timing-function:ease-in;
  41. }
  42. #test4 {
  43.   animation-timing-function:ease-out;
  44.   /* Firefox */
  45.   -moz-animation-timing-function:ease-out;
  46.   /* Safari and Google Chrome */
  47.   -webkit-animation-timing-function:ease-out;
  48. }
  49. #test5 {
  50.   animation-timing-function:ease-in-out;
  51.   /* Firefox */
  52.   -moz-animation-timing-function:ease-in-out;
  53.   /* Safari and Google Chrome */
  54.   -webkit-animation-timing-function:ease-in-out;
  55. }
  56. @keyframes boxmove
  57. {
  58. from {left:0px;}
  59. to {left:210px;}
  60. }
  61.  
  62. @-moz-keyframes boxmove /* Firefox */
  63. {
  64. from {left:0px;}
  65. to {left:210px;}
  66. }
  67. @-webkit-keyframes boxmove /* Safari and Google Chrome */
  68. {
  69. from {left:0px;}
  70. to {left:210px;}
  71. }
  72.  
  73. </style>
  74.  
  75. </head>
  76. <body>
  77.  
  78. <div id="test1" class="animate">linear</div>
  79. <br/>
  80. <div id="test2" class="animate">ease</div>
  81. <br/>
  82. <div id="test3" class="animate">ease-in</div>
  83. <br/>
  84. <div id="test4" class="animate">ease-out</div>
  85. <br/>
  86. <div id="test5" class="animate">ease-in-out</div>
  87.  
  88. </body>
  89. </html>

This is the result of the code above:

result

Tags

Add new comment

About text formats
  • 45 views