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

Implementation code for using CSS text-emphasis to emphasize text

1. Introduction In the past, if you wanted to emp...

A brief discussion on the problem of forgotten mysql password and login error

If you forget your MySQL login password, the solu...

Vue implements two-way data binding

This article example shares the specific code of ...

Bootstrap 3.0 study notes buttons and drop-down menus

The previous article was a simple review of the B...

WEB Chinese Font Application Guide

Using fonts on the Web is both a fundamental skill...

uniapp Sample code for implementing global sharing of WeChat mini-programs

Table of contents Create a global shared content ...

Teach you how to create a project using vue-cli3 in five minutes (beginner's guide)

Table of contents 1. Build the Vue environment 2....

Explanation of MySQL's horizontal and vertical table partitioning

In my previous article, I said that the optimizat...

Three.js realizes Facebook Metaverse 3D dynamic logo effect

Table of contents background What is the Metavers...

Detailed explanation of Linux LVM logical volume configuration process (create, increase, reduce, delete, uninstall)

Detailed explanation of Linux LVM logical volume ...

Introduction to MySQL Connection Control Plugin

Table of contents 1. Introduction to the connecti...

Take you to a thorough understanding of the prototype object in JavaScript

Table of contents 1. What is a prototype? 1.1 Fun...

Detailed explanation of why v-if and v-for in Vue are not recommended to be used together

This article mainly introduces why v-if and v-for...

Explanation of building graph database neo4j in Linux environment

Neo4j (one of the Nosql) is a high-performance gr...

JavaScript implements class lottery applet

This article shares the specific code of JavaScri...