Using CSS Transitions
December 09, 2020 • 1 min read
Yesterday I’ve build the Expanding Cards one and refreshed my mind about CSS Transitions which I believe are cool to know about and use.
CSS Transitions allow you do modify a CSS property smoothly, over a given duration.
To do this you have 4 propreties at hand and you can write it in 2 ways:
transition Is the shorthand property for setting the four transition properties into a single property as per the example above
transition-property Specifies the name of the CSS property the transition effect is for.
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete. The slower you want something to change the higher you would set this value.
transition-timing-function Specifies the speed curve of the transition effect. There are various options. My advice for this is to try them out and see how things change. You can find the options with some visual examples here.
transition-delay Specifies a delay (in seconds) for the transition effect.
In the project I did the effect was used to ease in with for 0.3 seconds with a delay 0.4 second delay the opacity of the text. See it in action here