[10 MINS/DAY] CSS Transition

Time:2021-2-11

CSS transitionsProvides a way to control animation speed when changing CSS properties. It can make property change a process that lasts for a period of time, rather than taking effect immediately. For example, changing the color of an element from white to black usually takes effect immediately. After using CSS transitions, the color of the element will gradually change from white to black, changing at a certain curve rate. This process can be customized.
transition = transition-property + transition-duration + transition-timing-function + transition-delay

  • transition-property

Specifies the name of the application transition property. List of available propertieshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
none: no transition animation.
all: all properties that can be animated show transition animation.
IDENT: property name. From lowercase lettersareachz, number0reach9, underline(_)And dashes(-)。 The first non dash character cannot be a number. At the same time, you cannot start with two dashes.

  • transition-duration

<time>Type. Represents the time required for a transition property to change from an old value to a new value. If the duration is0s, indicating that the transition animation will not be rendered, and the attribute will complete the transition instantaneously. Negative values are not accepted. (unit: s or MS)

  • transition-timing-function
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
  • transition-delay

It specifies the waiting time before the transition starts to work. Value, in seconds (s) or milliseconds (MS), indicates when transition will start. When the value is positive, it will delay for a period of time to respond to the transition effect; when the value is negative, it will cause the transition to start immediately.

Transition VS Animation
Transition can smoothly transition from one state to another, while animation can do a series of more complex motions. Transitions are generally easier to create and manage, and are suitable for most situations. If you need to have a higher degree of control over an element, you can do a series of animation steps; or when you need to start loading animation, it is better to use keyframes to complete the animation.