10B. Transitions
What are Transitions?
If you worked with resizable components in you webpage a lot, you will know what i mean, but when you resize a window, a button, etc. it looks very choppy, basically it instantly changes its size which is not the best user experience, which is why we use transitions. Transitions basically say that if something you specify happens, it should transition from the beginning state to the end state in a given amount of time.
How to use Transitions?
When writing a Transition, two things are required:
- <property>: which properties to animate.
- <duration>: how long the animation will last.
The Syntax of a Transition looks like this:
transition: <property> <duration> <timing-function> <delay>;
This is what the other two parts of the syntax do:
- <delay>: when the animation will start.
- <timing-function>: how the transition runs
- for example: linear, ease-in, ease-out
You can also write a comma separated list for multiple properties, i will show you an example for a transition that listens to width and height changes and gives
them a different duration:
transition: width 2.5, height 4s;
Note: Not all properties are able to be transitioned, if you want to transition something, its best to look it up or ask an AI for help
If you need a visual Example the MediaQueries.bbj also has transitions on the buttons in the desktop version, try them out and look at the code.