Transition & Transform
CSS transitions allow to smoothly go from one element’s state to another. How it works is that individual properties are animated from an initial to a final state.
transition-property: which properties to animate
transition-duration: how long the animation lasts
transition-timing-function: how the intermediate states are calculated
transition-delay: to start the animation after a certain amount of time
Defines which properties will transition.
as like -
Defines how long the transition lasts.
same as animation timing function
Defines how long the transition has to wait before starting.
Fashioning unique shapes.CSS transforms are a collection of functions that allow to shape elements in particular ways:
- translate: moves the element along up to 3 axis (x,y and z)
- rotate: moves the element around a central point
- scale: resizes the element
- skew: distorts the element