This is the 22nd day of my participation in the August More Text Challenge

CSS Transitions provides a way to control animation speed when changing CSS properties. This allows property changes to occur over a period of time rather than immediately.

Transitions between two states are often referred to as Implicit transitions, because the process is determined by the browser.

Transition-property (required)

Transition-property Specifies the name of the transition property to apply.

Grammar:

transition-property: none|all| property;
Copy the code
  • none: No properties get transition animations.
  • all: All animatable properties show transition animations.
  • property: Defines a comma-separated list of CSS property names to apply the transition effect.

When the attribute value list is inconsistent in length

Using the length of the transition-property value list as a criterion,

  • If the number of attributes in an attribute list is less than the number of attributes, the attribute list items are repeated. (example: transition-duration)

    /* The number of times specified is less than the number of attributes */
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s.5ms;
}

/* The duration list repeats */
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s.5ms.3s.5ms;
}
Copy the code

  • If the number of attributes in an attribute list is greater than the number of attributes, the attribute list item list is trimmed. (example: transition-duration)

    /* The specified number of times is greater than the number of attributes */
div {
  transition-property: opacity, left;
  transition-duration: 3s.5ms.2s.1ms;
}

/* The list will be trimmed */
div {
  transition-property: opacity, left;
  transition-duration: 3s.5ms;
}
Copy the code

  • In both cases, the property list remains the same.

Transition-duration (mandatory)

Transition-duration, specifies the time (in seconds or milliseconds) required for the transition animation.

Note: The default value is 0s, that is, if this is not set, there will be no transition animation.

Grammar:

transition-duration: time;
Copy the code

Multiple durations can be specified, and each duration is applied to the corresponding property specified by transition-property.

transition-timing-function

The transition timing-function property describes how the intermediate value is computed (an acceleration curve).

Grammar:

transition-timing-function: <easing-function>;
Copy the code

Easing functions

Liner linear

  • linear: Start to finish at the same speedCubic - the bezier (0,0,1,1)).

Cubic – Bezier () Bezier curve

  • ease: Slow start, then fast, then slow finishCubic - the bezier (0.25, 0.1, 0.25, 1)).
  • ease-in: Start at a slow speedCubic - the bezier (0.42, 0,1,1)).
  • ease-out: Ends at a slow speed,0,0.58 cubic - the bezier (0, 1)).
  • ease-in-out: Begins and ends at a slow speedCubic - the bezier (0.42, 0,0.58, 1)).
  • cubic-bezier(n,n,n,n): customcubic-bezierfunction

Steps () step function

  • step-startIs equal to:steps(1, jump-start) 或 steps(1, start).
  • step-endIs equal to:steps(1, jump-end) 或 steps(1, end).
  • steps(number_of_steps, direction)
    • number_of_steps: must be a positive integer, indicating the number of steps.
    • direction: indicates whether the function is left – or right-continuous. (the default,end)
      • jump-startRepresents a left continuous function, so the first step or jump occurs at the beginning of interpolation;
      • jump-endRepresents a right continuous function, so the last step or jump occurs at the end of the interpolation;
      • jump-bothIs the left and right continuous function;
      • jump-none, represents a discontinuous function with no jump at either end. One over n for each duration.
      • startIs equivalent tojump-start
      • endThe equivalent ofjump-end

transition-delay

Transition-delay, the amount of time (in seconds or milliseconds) needed to wait before the transition effect begins to take effect.

If the value is negative, the transition starts immediately.

transition-delay: 2s.4ms;
Copy the code

transition

Transition is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. Multiple attributes are separated by commas.

Grammar:

transition: property duration timing-function delay;
Copy the code

Check whether the transition is complete

The transitionEnd event is triggered after transition ends.

The transitionEnd event is emitted bidirectionally, both when the transition to the transition state is complete and when a full return to the default or non-transition state is completed.

The transitionEnd event provides two properties:

  • propertyName: string indicating the completed transition property.
  • elapsedTime: floating point number indicating how long transition has been running in seconds when this event is triggered. This value is not affectedtransition-delayImpact.

We can listen for this event with the element.adDeventListener () method, like this:

// Code for Safari 3.1 through 6.0
document
  .getElementById("myDIV")
  .addEventListener("webkitTransitionEnd", myFunction);

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

function myFunction(event) {
  // Completed transition properties
  const propertyName = event.propertyName;
  // Transition has been running
  const elapsedTime = event.elapsedTime;

  / / print
  this.innerHTML =
    "Transition property: " +
    propertyName +
    ", lasted: " +
    elapsedTime +
    " seconds";
}
Copy the code

Note: The transitionEnd event is not triggered if the transition is cancelled because the animation property value changes before the transition completes.

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query