CSS Transitions
CSS transitions allow you change a property value over a given duration. This can create a nice effect of changing something in CSS over a slower period of time instead of immediately. This can help make your webpage feel alive and can make it a bit more interesting to interact with
With a CSS transition you can chose 1) Which property to animate 2) When it will start 3) How long it will last 4) How long the animation will run for
Not all CSS properties can be animated. Check the full list to know which properties you can make come alive.
There is a shorthand css transition property which is written as:
The long form versions are:
- transition-property: name of the css property to which the transition will apply
- transition-duration: how long the transition will occur, e.g. 0.5s or 1s
- transition-timing-function: specifies the speed over time an object is transitioned from one value to another. Some examples are linear, ease, ease-in, ease-out
- transition-delay: how long the wait between the time a property is changed and when the transition begins
A simple transition can be seen with a color change on hover. Hover over the rectangle to see:
Read more about it here