Several CSS properties that are easily confused

CSS has many properties, and some of them are easy to confuse, whether it is the spelling of letters or the literal meaning. For example, I listed several properties, is it also confused you ~

attribute

meaning

Animation

Used to set animation properties, which is a shorthand property containing six properties

Transition

The style transitions used to set elements have a similar effect to animation, but the details are quite different

Transform

It is used to rotate, scale, move, or tilt an element, and has nothing to do with the animation that sets the style, just as color is used to set the “appearance” of an element.

Translate (move)

Translate is just an attribute value of transform, that is, move.

Figure out these questions, we can be clear-headed state to learn CSS animation

transition

What is transition? Literally, the transition of an element from one value of this attribute (color) (red) to another value of this attribute (color) (green) is a state transition that requires a condition to trigger the transition, Examples include: Hoever, : Focus, : Checked, media queries, or JavaScript.

Let’s start with a simple demo of how transition works

<! DOCTYPE html> <html lang="en"> <head> <title>transition</title> <style> #box { height: 100px; width: 100px; background: green; transition: transform 1s ease-in 1s; } #box:hover { transform: rotate(180deg) scale(.5, .5); } < / style > < / head > < body > < div id = "box" > < / div > < / body > < / HTML > duplicate codeCopy the code

Effect:

The transition property is transform. When the mouse moves over an element, the transform changes, and the animation is triggered. When the mouse moves over an element, the transform changes. The transition property changes. This animation needs to be triggered by a driving force. It has the following limitations:

  1. It needs to be triggered by an event, so it can’t happen automatically when the page loads
  2. It’s a one-off, it can’t happen again unless it’s triggered again and again
  3. You can define only start and end states, not intermediate states, that is, only two states
  4. A transition rule defines only one property change, not multiple properties.

Transition: property duration timing-function delay;

value

describe

transition-property

Specifies the name of the CSS property that sets the transition effect

transition-duration

Specifies how many seconds or milliseconds it takes to complete the transition effect

transition-timing-function

The speed curve specifying the speed effect

transition-delay

Define when transition effects begin

animation

This property is introduced in the official introduction as an extension of the transition property, which makes up for many deficiencies of transition. I understand that animation is made up of effects of multiple transitions, which are more maneuverable and can produce complex and cool effects (provided that you love to mess around). Let’s use an example to illustrate the power of animation:

<! DOCTYPE html> <html lang="en"> <head> <title>animation</title> <style> .box { height: 100px; width: 100px; border: 15px solid black; animation: changebox 1s ease-in-out 1s infinite alternate running forwards; } .box:hover { animation-play-state: paused; } @keyframes changebox { 10% { background: red; } 50% { width: 80px; } 70% { border: 15px solid yellow; } 100% { width: 180px; height: 180px; }} < / style > < / head > < body > < div class = "box" > < / div > < / body > < / HTML > duplicate codeCopy the code

Analysis:

Let’s take a look at the key point keyframes, which defines an animation combination called Changebox, in which 10%, 50%, 70% and 100% represent the property values at different time points in the change. For example, the total time of the animation is 1s, then 10% is the animation in 0-0.1s. This greatly improves our control over the animation, which is the basis for complex animation. Let’s go back to the entire eight values in the animation. Isn’t it a bit exaggerated? Control animations have become very flexible, so let’s look at the syntax and what each value represents:

Animation: name duration timing-function delay iteration-count direction play-state fill-mode; animation: name duration timing-function delay iteration-count direction play-state fill-mode;

value

describe

name

Used to call the animation defined by @keyFrames, the same animation name defined by @KeyFrames

duration

Specifies the duration for which the element plays the animation

timing-function

The speed curve that defines the speed effect is the transformation rate for the time range of each small animation

delay

Defines the time to wait before the browser starts executing the animation, and the time to wait before the entire animation executes

iteration-count

Define the number of times the animation can be played.

direction

Set the animation playback direction: normal(in chronological order),reverse(in the opposite direction of the time axis),alternate(alternate),alternate-reverse(the animation first runs in the opposite direction and then runs in the positive direction, and continues to run alternately)

play-state

Controls the playback state of the element animation, using which to control the animation to pause and resume, two values: running, paused

fill-mode

Controls the style of the element after the animation is over, with four values: None (back to the state before animations start), forwards(animations stay at the end after animations end), backwords(animations return to the first frame), both(animations are forwards and backwards in rotation according to animation-direction), Be careful not to conflict with rotund-count (animation executes indefinitely)

The difference between Animation and Transition is that Keyframes provide more control, especially the control of the timeline, which makes CSS animation more powerful. Part of flash animation effects can be directly controlled by CSS, and all this only requires a few lines of code. As a result, a large number of CSS-BASED animation libraries were created to replace the animation parts of Flash. In my projects, I usually use Animate. CSS to set up some animations. I hope I can use animation to perfectly realize the design drawings given by UI designers

conclusion

The purpose of this article is to remind myself not to confuse these four attributes, and to explain in detail the method of CSS animation. I recommend using Transition for simple one-time animations, which is logical and maintainable. In fact, not only CSS can be used to realize animation, but JS can also control the style of elements to realize animation. At this time, do you have setTimeout and setInterval in mind to control the style and realize animation? Of course it can, but it performs better than the new requestAnimationFrame, so you can try it on Google, and I’ll write a detailed guide to the new function later.

There are some mistakes in this article

The Next Day is Always a New Day

Author: Vince_ Link: juejin.cn/post/684490…