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

Element Plus implements Affix

Table of contents 1. Component Introduction 2. So...

Sample code for implementing menu permission control in Vue

When people are working on a backend management s...

Understanding and usage scenarios of ES6 extension operators

Table of contents 1. Replace the apply method, ge...

jQuery implements Table paging effect

This article shares the specific code of jQuery t...

Two implementation solutions for vuex data persistence

Table of contents Business requirements: Solution...

A brief analysis of how to access Windows 10 host folders from CentOS 8 virtual machines

After installing VMware Tools, ① text can be copi...

CSS to achieve dynamic secondary menu

Dynamically implement a simple secondary menu Whe...

How to deploy stand-alone Pulsar and clustered Redis using Docker (development artifact)

Table of contents 1. Introduction: 2. Docker: 1 C...

Using JS timer to move elements

Use JS timer to make an element to make a method ...

Linux system disk formatting and manually adding swap partition

Windows: Support NTFS, FAT Linux supports file fo...

Detailed process of installing nginx1.9.1 on centos8

1.17.9 More delicious, really Nginx download addr...

It is not recommended to copy the content in Word directly to the editor on the website.

<br />Question: Why is it not recommended to...

The MySQL server is running with the --read-only option so it cannot execute this statement

I was in a meeting when a colleague called to rep...

How to write a picture as a background and a link (background picture plus link)

The picture is used as the background and the lin...

Using puppeteer to implement webpage screenshot function on linux (centos)

You may encounter the following problems when ins...