Writing in the front

Take a look at how you can write animations using CSS.

Why write animation

  1. Increase transitions and reduce abrupt changes (continuity of change)
  2. Cool effect, eye-catching (visual attraction)
  3. Pass on more information

A, the Transition

Transition refers to the gradual change of the same element from one state to another.

It allows you to define different transitions for an element as it switches between different states (sort of like PPT transitions). Such as switching between pseudo-classes, such as :hover, :active, or state changes via JS.

The transition property can be specified as a transition effect of one or more CSS properties separated by commas.

<! DOCTYPE HTML > < HTML > <head> <title> </title> <style>. height: 100px; transition: all 2s; // transition: width 2s, height 3s; } .rectangle:hover { width: 250px; height: 250px; } </style> </head> <body> <div class="rectangle">Copy the code

Transiton is short for four properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

Its features are:

  1. Different states for the same element.
  2. Implicit transitions, where the state between start and end is determined by the browser.

The transition of Vue

<template> <div class="wrap"> <div> It is the title </div> <transition name="fade"> <div V-if ="isShow"></div> </transition> </div> </template>Copy the code

In Vue, the framework itself provides a
tag to wrap the V-if/V-show element, using the name attribute to locate the transition tag. Vue provides some CSS custom class names for custom name attribute values. The actual transition styles are written in these hook class names.

It’s important to understand that transitions in Vue actually involve two states: element insert and element delete.

When inserting or deleting elements contained in the Transition component, Vue does the following:

  1. Automatically sniff out if the target element has CSS transitions or animations applied, and if so, add/remove CSS class names when appropriate.
  2. If the transition component provides JavaScript hook functions, these hook functions will be called at the appropriate time.
  3. If the JavaScript hook is not found and CSS transitions/animations are not detected, the DOM operation (insert/delete) is performed immediately in the next frame. (Note: this refers to browser frame-by-frame animation, and Vue’snextTickDifferent concepts).

Second, the Transform

The CSStransform property allows you to rotate, scale, skew or translate a given element. This is done by modifying the coordinate space of the CSS visual formatting model.

⚠️ Note: The transform can only transform elements located by the box model. In other words, we have display: block; The element.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> <style>. Box {width: 150px; height: 50px; background: red; transition: transform 2s; }. Box :hover {transform: translate(100px, 200px) rotate(0.25turn); } < / style > < / head > < body > < div class = "wrap" > < div class = "box" > this is box < / div > < / div > < / body > < / HTML >Copy the code

Third, Animation

An Animation is a real Animation. It can do much more than a transform that only transforms four major aspects of a given element. Animation makes it possible to convert from one CSS style configuration to another. The different style configurations are not restrictive to the developer. It describes animation based on the concept of keyframes, just like flash animation learned a long time ago, developers need to define different frames throughout the animation process. Finally, the different frames are combined to create the animation we want.

Based on this, the Animation consists of two parts: style rules that describe the Animation and keyframes that specify the start, end, and midpoint styles of the Animation. The first section describes the style rules for the animation, in other words, configuring the animation. This requires CSS properties: animation and its children. This property allows you to configure the animation time, duration, and other animation details, but it does not configure the actual performance of the animation. The actual representation of an animation is implemented by the @keyframes rule, which is keyframes.

Configure animation time, etc

Animation is a shorthand for eight properties:

  1. animation-name

    Specifies the name of the keyframe described by @keyframes

  2. animation-duration

    Sets the length of an animation cycle

  3. animation-timing-function

    Set the animation speed, that is, by creating an acceleration curve, set how the animation changes between key frames

  4. animation-delay

    Set the delay, which is the time between the completion of the element loading and the start of the animation sequence

  5. animation-iteration-count

    Set the number of animation repeats. You can specify infinite number of animation repeats

  6. animation-direction

    Sets whether the animation runs in reverse or back to the start position after each run

  7. animation-fill-mode

    How to apply styles to target elements before and after specifying animation execution

  8. animation-play-state

    Allows you to pause and resume health animations

Define the keyframes for the animation

Once you’ve configured the animation’s timing and so on, you need to define the animation’s performance. This is done by creating two or more keyframes using @keyFrames. Each keyframe describes how the animation element should be rendered at a given point in time.

Because the animation’s timing is defined through CSS styles, keyframes use percentages to specify when the animation happens. In other words, the definition of a keyframe depends on the execution time of the entire animation, with some way of locating it to different points in time to apply different CSS styles. 0% represents the first moment of the animation and 100% represents the final moment of the animation. Because these two points in time are so important, they have special nicknames: from and to. Both are optional, and if from/0% and to/100% are not specified, the browser starts or ends the animation with calculated values.

Of course, you can also include optional additional keyframes that describe the state between the beginning and end of the animation.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style>. Circle {width: 150px; height: 150px; background: #1a66a6; border: 5px solid black; border-radius: 50%; animation: translate 3s ease-in 1s infinite reverse; } @keyframes translate { form { margin-left: 0; } 75% { margin-left: 120px; background: yellow; } to { margin-left: 300px; } } </style> </head> <body> <div class="wrap"> <div class="circle"></div> </div> </body> </html>Copy the code

Refer to the article

  1. Using CSS transitions – MDN
  2. Vue documents – Enter leave & list transitions
  3. Using the transform – MDN
  4. Animation with CSS – MDN
  5. Animation – MDN