The difference between animation and transition

The difference between animation and transition

The difference between CSS3 animation and JS animation

JS implements frame animation
CSS3 implements tween animation

  • Frame animation: Use a timer to change the current element at regular intervals
  • Tween animation: Transition (adding transition as long as the state changes to produce animation) animation (multiple nodes to control the animation) performance will be better

transition

Transition is a simple animation attribute, which can be regarded as a simplified version of animation. It is usually used with event triggering and is simple and easy to use.

Transition property values

describe property
transition-property The attribute that needs to be transitioned can also be all, and block, none, etc. cannot be used
transition-duration Specifies the time to take to transition from one property to another. The default value is 0. When it is 0, it means that the change is instantaneous and the transition effect cannot be seen.
transiton-timing-function It is the transition animation type. Available types include liner (constant speed), ease-in (deceleration), ease-out (acceleration), ease-in-out (acceleration first and then deceleration), cubic-bezier: cubic Bezier curve, which can be customized
transition-delay Specifies that execution will start after a certain delay after a transition behavior is detected.

Transition Features

Transitions need to be triggered by events [such as adding a hover pseudo-class]. They cannot happen automatically once when the page is loaded, and they cannot happen repeatedly unless they are triggered repeatedly. There are only two states: start and end. A transition rule can only define one attribute.

<body>
    <div ></div>
</body>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        transition: width 1s 0.5s ease-in-out;
    }

    .box:hover {
        width: 200px;
    }
</style>

The effect is as follows

You can also write transition in hover transition: width 1s 0.5s ease-in-out

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}

In fact, it is also possible to write on hover, but when I move out of the element, the element width is immediately restored without any transition!
The reason is very simple. You only write transition on hover, which means that the pseudo-class will only take effect when the mouse moves over it.

animation

Animation property values

property describe
animation-name Used to call the animation defined by @keyframes, which is consistent with the animation name defined by @keyframes
animation-duration Specifies the number of seconds or milliseconds it takes for an animation to complete one cycle. The default value is 0
animation-timing-function Speed ​​curve, like transition-timing-function, available types are liner (uniform speed), ease-in (deceleration), ease-out (acceleration), ease-in-out (acceleration first and then deceleration), cubic-bezier: cubic Bezier curve, can be customized
animation-delay Specifies when the animation starts. The default value is 0.
animation-iteration-count Specifies the number of times the animation is played. The default value is 1
animation-direction Normal is the default value. If it is set to normal, the animation plays forward (in order) each time it loops. Alternate (in turns), the animation plays forward at the even number of times and plays in the opposite direction at the odd number of times (this setting is effective when the value of animation-iteration-count is greater than 1)
animation-play-state running, you can use this value to replay the paused animation. The replay here does not start from the beginning of the element animation, but from the paused position. paused, paused
animation-fill-mode By default, after the animation ends, the style of the element will return to the starting state. The animation-fill-mode property can control the style of the element after the animation ends. There are four main property values: none (default, return to the state before the animation started), forwards (the animation stays in the end state after the animation ends), backwords (the animation returns to the state of the first frame), both (apply forwards and backwards rules alternately according to animation-direction)

<body>
    <div ></div>
</body>
<style>
.box {
    height: 200px;
    width: 200px;
    animation: 3s type forwards alternate infinite;
    animation-play-state: running;
}

.box:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background: yellowgreen
    }

    50% {
        background: yellow
    }

    to {
        background: aquamarine
    }
}
</style>

Pause when the mouse moves in, and continue changing color when the mouse moves out

transform

First of all, it should be noted that the transform attribute is a static attribute. Once it is written into the style, it will be directly displayed and will not appear in the animation process. By using the transform attribute, elements can be moved (translate), scaled (scale), rotated (rotate), and flipped (skew). For more detailed parameters, please refer to the CSS3 transform attribute.

Summarize

the difference transition animation
Can it be executed automatically? No, it needs to be triggered by an event, such as hover able
Can it happen repeatedly? No, unless in a trigger able
Can it contain multiple states? No, there are only start and end states Yes, for example, from 0% to 100%, you can specify any transition state
Can I pause? No, one-time Yes, for example, a hover event triggers a pause
Can I define a speed curve? able able
Can I define a property value transition? able able

The above is the detailed content of the difference between animation and transition. For more information about animation and transition, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  Summary of experience in using div box model

>>:  Introduction to deploying selenium crawler program under Linux system

Recommend

Solve the problem of docker log mounting

The key is that the local server does not have wr...

Detailed explanation of js's event loop event queue in the browser

Table of contents Preface Understanding a stack a...

Core skills that web front-end development engineers need to master

The content involved in Web front-end development...

js realizes 3D sound effects through audioContext

This article shares the specific code of js to ac...

Summary of HTML horizontal and vertical centering issues

I have encountered many centering problems recent...

Detailed explanation of display modes in CSS tags

Label display mode (important) div and span tags ...

Solution to the problem of insufficient storage resource pool of Docker server

Table of contents 1. Problem Description 2. Probl...

Detailed explanation of scp and sftp commands under Linux

Table of contents Preface 1. scp usage 2. Use sft...

How to display a small icon in front of the browser URL

When you browse many websites, you will find that ...

JavaScript to implement dynamic digital clock

This article shares the specific code for impleme...

Solution to input cursor misalignment in Chrome, Firefox, and IE

Detailed explanation of the misplacement of the in...

jQuery canvas generates a poster with a QR code

This article shares the specific code for using j...

A brief understanding of the difference between MySQL union all and union

Union is a union operation on the data, excluding...

How much data can be stored in a MySQL table?

Programmers must deal with MySQL a lot, and it ca...

Implementation example of nginx access control

About Nginx, a high-performance, lightweight web ...