CSS transition ...

When animating your CSS elements, you can prevent the effects from occurring immediately by delaying or slowing down by controlling the animation speed. That is transition

Transition has up to 6 properties which are:

transition

transition-delay

transition-duration

transition-property

transition-timing-function

N.B: If you don't specify the transition duration, no effect will occur since the default value is 0

transition-timing-function specifies the speed curve of the transition effect

it has the following values that :

1. ease: slow start, goes fast then ends slowly

2. linear: same speed from start to end

3. ease-in: a slow start

4. ease-out: a slow end

5. ease-in-out: a slow start and end

6. cubic-bezier(n,n,n,n): lets you define your own values in a cubic-bezier function N.B: n value must be between 0 and 1

Adding delay in transition

transition-delay specifies a delay in seconds for the transition effect

<div class="box">

</div>

.box{
  width: 10rem;
  height: 10rem;
  background: red;
  transition-duration: 1000ms;
  transition-property: background, width;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}



.box:hover{
  background:blue;
  width: 20rem;

}

for transition-property, when you have a lot of properties to transition its possible to write transition-property: all, However it is not recommended, it's better to specify them as its shown in the code snippet above.

Codepen link: https://codepen.io/delyc/pen/poKwWmx