From my blog, ryougifujino.com.

Original Address (MDN)

CSS Transitions provides a way to control animation speed while changing CSS properties. You can make a property change gradually over a period of time, rather than suddenly. For example, if you want to change the color from white to black, usually the change is sudden. With CSS Transitions, this change can take place over a period of time and follow an acceleration curve, all of which is customizable.

Animations that involve transitions between two states are called implicit Transitions, because the states between the start and end states are implicitly defined by the browser.

CSS Transitions lets you decide which properties to animate (by explicitly listing them), when the animations occur (by setting delay), how long the transitions last (by setting duration), and how the transitions are executed (by defining a timing function, for example, Linear or fast and slow).

Which CSS properties can be transitioned?

The page author can define which properties to execute and how to execute the animation. This can create very complex transitions. The properties of executable animation are limited to a finite set because certain properties do not make sense to animate.

Note: The properties of executable animation change as the specification evolves.

The value auto is usually very complex. The specification recommends that you do not use auto in the start (from) and end (to) when defining an animation. (The Specification Recommends not animating from and to Auto.) Some Gecko based UA implementations implement this requirement, while others WebKit based UA implementations don’t. So using Auto in an animation can lead to unpredictable results, depending on the browser and their version, which should be avoided.

Define transitions

CSS Transitions is controlled by the shorthand property Transition. This is the best way to make the configuration transition, because it’s easier to avoid the unsyncing of the parameters (which can be frustrating and have to spend a lot of time debugging in CSS).

You can use the following sub-attributes to control the various parts of the transition:

(Note that these infinite loop transitions are for example only; The CSStransitionIt’s just visualizing how a property changes from start to finish. If you need a visualization of loops, check out CSSanimationAttributes).

transition-property

Specifies the name of one or more CSS properties to which the transition effect will be applied. Only properties listed here will be animated during the transition; Changes to other properties occurred immediately as usual.

transition-duration

Assign a time period to the transition. You can specify a duration for all attributes that will have a transition effect, or you can specify multiple values so that each attribute has a different transition duration.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .parent {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            position: relative;
        }

        .box {
            width: 20px;
            height: 20px;
            left: 0;
            top: 0;
            background: lightblue;
            position: absolute;
            transition-property: width height left top background;
            transition-duration: 1s;
        }

        .box1 {
            width: 50px;
            height: 50px;
            left: 100px;
            top: 100px;
            background: lightgreen;
            position: absolute;
            transition-property: width height left top background;
            transition-duration: 1s;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="box"></div>
</div>
<script>
    function updateTransition() {
        let el = document.querySelector('div.box');
        if (el) {
            el.className = 'box1';
        } else {
            el = document.querySelector('div.box1');
            el.className = 'box'; }}setInterval(updateTransition, 1000);
</script>
</body>
</html>
Copy the code

transition-timing-function

Specifies a function that defines how the intermediate value of a property is computed. Timing Function determines how the intermediate value of the transition is calculated. Most timing functions can be specified by the image of the corresponding function, such as the bezier curve image defined by four points. You can also select easing from the Easing function cheat sheet.

transition-delay

Defines how long to wait before property changes and transitions actually begin.

Abbreviation of grammar

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

example

A simple example

This example performs a 4 second font size transition and a 2 second delay between the user mouse over the element and the actual start of the animation effect.

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}
Copy the code

Multiple examples of properties that will animate

CSS content

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
Copy the code

This box combines the width, height, background-color, and transform attributes.

When the property value list is not long

When the list of values for any attribute is shorter than the other attributes, its values will be repeated to make them match. Such as:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s.5s;
}
Copy the code

Is equal to:

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s.5s.3s.5s;
}
Copy the code

Also, if any property value list is longer than the transition-property value list, it will be truncated, so if you have CSS like this:

div {
  transition-property: opacity, left;
  transition-duration: 3s.5s.2s.1s;
}
Copy the code

This will be interpreted as the following:

div {
  transition-property: opacity, left;
  transition-duration: 3s.5s;
}
Copy the code

Used when highlighting menustransition

One common CSS use case is that when a user hovers over an item in a menu, that item is highlighted. We can use transition to make this effect more attractive.

Before we look at the code snippets, you might want to take a look at the Live demo (assuming your browser supports Transition).

First, we set the HTML to use for the menu:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>
Copy the code

Then we create CSS to achieve the look and feel of our menus. The relevant snippets are as follows:

a {
  color: #fff;
  background-color: # 333;
  transition: all 1s ease-out;
}

a:hover.a:focus {
  color: # 333;
  background-color: #fff;
}
Copy the code

This CSS creates the appearance of the menu, and the background and text colors change when its elements are in the :hover and: Focus states.

An example of JavaScript

Care should be taken when using Transition immediately after:

  • with.appendChild()Add the element to the DOM.
  • Delete elementdisplay: none;Properties.

In these cases, the initial state appears as if it never happened, and the element is always in its final state. The easiest way to overcome these limitations is to use window.setTimeout() to set an appropriate time to delay execution when you want to change the properties of the application transition effect.

usingtransitionMake JavaScript effects smoother

Transition is a great tool for making things smoother without having to do anything with your JavaScript. Take a look at the following example.

<p>Click anywhere to move the ball</p>
<div id="foo"></div>
Copy the code

With JavaScript you can create the effect of moving the ball to the middle of the click position:

var f = document.getElementById('foo');
document.addEventListener('click'.function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25) +'px)';
    f.style.transform += 'translateX('+(ev.clientX-25) +'px)';
},false);
Copy the code

With CSS you can make this process much smoother without any additional JavaScript work. Just add a transition to the element and everything will be silky.

p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}
Copy the code

You can find the demo here.

detectiontransitionThe beginning and the end of

You can use the TransiTIONED event to check if an animation is over. This is a TransitionEvent object that adds two additional properties to the typical Event object:

PropertyName A string indicating the name of the CSS property that ends the transition effect.

ElapsedTime A floating point number indicating the number of seconds the transition has been running since the event began. This value is not affected by transition-delay.

In general, you can listen for this event using the addEventListener() method:

el.addEventListener("transitionend", updateTransition, true);
Copy the code

You can also detect the start of the transition with transitionRun (fired before any delay) and transitionStart (fired after any delay) :

el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
Copy the code

Note: The transitionEnd event is not triggered if the transition is cancelled before the transition completes. This is because in this case either the element is set to display: None or the value of the animation property is changed.

Updated on Mar 23, 2019, 8:15:15 PM. Some of the live demo cannot be linked to, please go to the original article to check.