TIL11 - CSS - Transitions

Transitions

For elements that have changing properties (i.e. an element with :hover effect), you can set transition property to make the effect smoother and more advanced

transition has 4 key components:

• transition-property - the CSS property for which the transition will be applied to
• transition-duration - the duration of the transition effect
• transition-timing-function - the transition's acceleration effect
• transition-delay - the duration of pause before the transition starts
  
  
  *each of these can be specified as a separate property on its own, or can be used all together in one line with the transtion property

• If you want to set the same transition effects for all CSS properties that change, you can set transition-property: all
• You can also set different transition effects for multiple CSS properties on the same line by separting them with a ,
  > ex)

transition: color 500ms ease-in 300ms, font-size 750ms ease-out;