Transition and animation are both new features of CSS3 that can be used to create rich animations. However, since the functions of the two features overlap, it is often not clear which one to choose. Let’s take a look at these two features and how they can be used.

Transition

Transition literally means transition. It moves the style of an element from one state to another by controlling its attributes. The following table lists the transition properties:

transition

Abbreviations for the following four transition attributes

transition-property

Apply CSS transitions to CSS properties

transition-duration

Duration of transition effect

transition-timing-function

The time curve of transition effect is defined, that is, the uniform speed of transition

transition-delay

When does rule transition start? Default is 0

Let’s take a look at some examples to see how these attributes can be used.

Let’s start with a basic example. The effect is shown below. When the mouse moves over an element, the element is rotated 360 degrees and the color size changes. When the mouse moves out, the element style automatically changes back to the original.

 <style>
    .transition {
      ...
      background-color: red;
      transition: transform 2s, background-color 2s;
    }
    .transition:hover {
      transform: scale(1.2) rotate(360deg);
      background-color: yellow;
    }
</style>
<div class="transition">transition</div>Copy the code

Some of the key code is listed above. We define a div element with the class transition, define some base attributes under its class name to indicate the starting state, and use the hover pseudo-class to define the ending state. The most important line is the Transition property, which controls the transform and background-color CSS properties and lasts two seconds.

Does Transition have to be simple? Is that all it can do? Of course not. We can also use Transition to create continuous animations, with the help of javascript. Let’s take a look at this simple example.

function startCarousel() {
    setTimeout(function () {
         left = left - width;
         carousel.setAttribute('style', 'Transition: left 0.6s; left:${left}px; `)}, 1000); } carousel.addEventListener('transitionend', startCarousel);
carousel.addEventListener("webkitTransitionEnd", startCarousel);
startCarousel();Copy the code

The setTimeout method is used to change the left attribute of the element. The function that changes the left attribute is bound to this attribute using the transitionEnd event, which is called when transition ends. Js also provides the transitionStart event, which is triggered at transitionstart.

Animation

Transition specifies the start and end states, and animation is similar to frame-by-frame animation, which is as delicate and flexible as video playback. This frame-by-frame animation consists of key frames, and the continuous play of multiple key frames constitutes the animation. Css3 animation makes use of this principle and uses the keyFrame attribute to complete the frame-by-frame playback of animation.

animation-name

Used to set the animation name

animation-duration

The duration of the animation

animation-timing-function

Animation playback time curve, similar to transition-timing-function

animation-delay

Set the delay time for the animation

animation-iteration-count

Number of animation cycles, default is 1, can be set to infinite

animation-direction

Animation Playback Direction

animation-play-state

Animation playback state: RUNNING, paused

animation

Shorthand for the above property

Here’s a quick example to look at the basic usage of common animation properties.

<head>
    <style>
        .div {
            ...
.            
            animation-name: move, size;
            animation-duration: 3s;
            animation-timing-function: ease-in-out;
            animation-play-state: paused;
            animation-iteration-count: infinite;
            animation-direction: alternate
        }
        @keyframes move {
            0% {
                left: 0;
                transform: rotate(0deg);
            }
            100% {
                left: 500px;
                transform: rotate(720deg);
            }
        }
        @keyframes size {
            from { font-size: 25px; }
            to { font-size: 50px; }
        }
    </style>
</head>




<body>
    <div class="div">
        😊
    </div>
    <div>
        <button id="run">run</button>
        <button id="pause">pause</button>
    </div>
    <script>
        var ele = document.getElementsByClassName('div') [0]; document.getElementById('run').addEventListener('click'.function() {
            ele.style.animationPlayState = 'running'
        });
        document.getElementById('pause').addEventListener('click'.function() {
            ele.style.animationPlayState = 'paused'
        });
    </script>
</bodyCopy the code

The above example defines two keyframes, move and size, to control the movement and size of the smiley face, respectively. The @keyFrame property is used here, and inside the keyframe you can define the animation frame using either from to or a percentage. The CSS defines animation-play-state as pause to indicate that the animation is paused, and the alternate property of animation-direction to indicate that the animation is repeated. In the javascript code we define two buttons that change the animation-play-state property of the element to control the play and pause of the animation.

From the example above, we can see that the starting and ending states of transition can be interpreted as the from to of the animation. Transition is definitely better when we are just trying to achieve a simple transition effect, otherwise it requires a lot of JS code to assist. However, due to the flexibility of animation with multiple keyframes, complex animation effects can be completed only by using CSS. We can choose the appropriate animation scheme according to different business scenarios.