TransitionEstimated reading time: 1 minute
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
transform-origin:50% 50%; /* center (default)*/ transform-origin: 10px 0; /* 10 px right offset*/ transform-origin: left bottom; /*bottom left*/