Hello readers, this is a smalll blog on animation-timing-function property. This property defines the speed of the animation. The animation-timing-function property, is used to define a function that defines how a transition will change during each cycle. These timing functions are also called easing functions. Easing functions have some predefined values. The possible values are:
ease-out - It defines an animation with a slow end
ease - This is default value. It defines an animation with a slow start, then fast, then end slowly.
ease-in - It defines defines an animation with a slow start
linear - It defines an animation having same speed from start to end
ease-in-out - It defines an animation with a slow start and end
cubic-bezier(n,n,n,n) - is used to define our own values in a cubic-bezier function
In this example I have create five circles of same width and height but different colour, I have applied different values of animation-timing-function property to each circle to show you the effect of different value and the difference between them.