Using CSS Transitions

December 09, 2020 • 1 min read

Recently Florin Pop shared a course he worked on and just launched on Udemy, 50 Projects In 50 Days - HTML, CSS & JavaScript. Given the great promotion, 10 euros for the course, I decided to purchase it in support of his work. The idea of the course is to sharpen my HTML, CSS & JavaScript skills by building 50 quick, unique & fun mini projects.

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:

.example {
  transition-property: color;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

.example {
  transition: [transition-property][transition-duration]
    [transition-timing-function][transition-delay];
}

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

Read More:

• Why setting the focus outline: 0 on a button is bad →