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>
  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. }
  17. #div1 {
  18. animation-timing-function: linear;
  19. }
  21. #div2 {
  22. animation-timing-function: ease;
  23. }
  25. #div3 {
  26. animation-timing-function: ease-in;
  27. }
  29. #div4 {
  30. animation-timing-function: ease-out;
  31. }
  33. #div5 {
  34. animation-timing-function: ease-in-out;
  35. }
  37. /* The following Code is for Safari and Google Chrome: */
  38. #div1 {
  39. -webkit-animation-timing-function: linear;
  40. }
  42. #div2 {
  43. -webkit-animation-timing-function: ease;
  44. }
  46. #div3 {
  47. -webkit-animation-timing-function: ease-in;
  48. }
  50. #div4 {
  51. -webkit-animation-timing-function: ease-out;
  52. }
  54. #div5 {
  55. -webkit-animation-timing-function: ease-in-out;
  56. }
  58. @keyframes myfirstmove {
  59. from {
  60. left: 10px;
  61. }
  63. to {
  64. left: 250px;
  65. }
  66. }
  68. @-webkit-keyframes myfirstmove
  70. /* Safari and Google Chrome */
  71. {
  72. from {
  73. left: 10px;
  74. }
  76. to {
  77. left: 250px;
  78. }
  79. }
  80. </style>
  81. </head>
  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>
  91. </html>