CSS 54 💻 transition-behavior, delay, duration and property

a - transition-behavior and delay
transition-behavior  allows you to control how transitions are animated.
values: normal → no animation for discrete animated properties
allow-discrete → Allows discrete changes to be animated
transition-behavior: allow-discrete; → Allows discrete changes to be animated
transition-delay can be used to specify a delay for the start of a CSS transition.
values: s or ms. 0s or 0ms starts immediately
You can specify multiple values for multiple properties separated with ','
transition-delay: 0.5s; → transition will start after 0.5s

b - transition-duration and property
transition-duration defines how long the transition will take to complete
values: s or ms. 0s or 0ms indicates no transition.
transition-duration: 1s, 2s; → 1s for the first and 2s for the second property
transition-property specifies the name or names of properties to which a transition effect should be applied.
values: none, all and property namesYou can specify multiple values for multiple properties separated with ','
transition-property: background-color, transform; → applies transition to those properties
transition-timing-function defines how intermediate values for animated properties are calculated during a transition.
values:  ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end and cubic-bezier
transition-timing-function: ease-in; → starts slowly and finishes quickly.