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

How to delete an image in Docker

The command to delete images in docker is docker ...

Detailed explanation of how to use eslint in vue

Table of contents 1. Description 2. Download rela...

Detailed explanation of CSS counter related attributes learning

The CSS counter attribute is supported by almost ...

Setting up a proxy server using nginx

Nginx can use its reverse proxy function to imple...

Detailed usage of Vue more filter widget

This article example shares the implementation me...

Implementation of multi-environment configuration (.env) of vue project

Table of contents What is multi-environment confi...

Use Firebug tool to debug the page on iPad

How to debug a page on iPad? When using iOS 5, you...

Example of how to automatically start an application service in a Docker container

If you want the application service in the Docker...

The difference and usage of distinct and row_number() over() in SQL

1 Introduction When we write SQL statements to op...

Detailed explanation of how to enable https service in Apache under Linux environment

This article describes how to enable https servic...

JavaScript to implement the web version of Gobang game

This article shares the specific code for JavaScr...

Defining the minimum height of the inline element span

The span tag is often used when making HTML web p...

Introduction to JavaScript Number and Math Objects

Table of contents 1. Number in JavaScript 2. Math...

How to build nfs service in ubuntu16.04

Introduction to NFS NFS (Network File System) is ...

A detailed account of the process of climbing a pit of Docker deployment service

First time writing. Allow me to introduce myself....