This article was first published on my Blog :Vince’s Blog

preface

On weekdays during the development process, as are his modify the program to play, there is no UI design for my drawings, more have no special requirements, lead to the CSS animations have been is not very familiar with, but as a new programmer, is about to enter the internship units of all the animation required to ready to designer, so with this article.

Several CSS properties that can be confusing

There are a lot of CSS properties, and some of them can be confusing, whether it’s the spelling or the literal meaning of the letter

attribute meaning
Animation (animation) Use to set the animation properties. It is a short for properties and contains 6 properties
The transition The style transition used to set elements has 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 animating a style. It is used to set the “appearance” of an element, just like color.
Translate Translate is just a property value of transform, the move.

With these questions in mind, we can learn CSS animation with a clear mind

transition

What is transition? Literally, the element goes from one value of this attribute (color) (red) to another value of this attribute (color) (green). This is a state transition that requires a condition to trigger the transition. Things like: Hoever, :focus, : Checked, media queries, or JavaScript.

Let’s start with a simple demo of what transition looks like

<! 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>

Copy the code

Effect:

When the mouse moves in, the transform of the element changes, which triggers the transition and generates an animation. When the mouse moves out, the transform changes again. The transition animation is generated only when the property set by the transition changes. This animation requires “a driving force to trigger”.

  1. An event is required, so it cannot happen automatically when the page loads
  2. It’s a one-off. It can’t be repeated unless it’s triggered again and again
  3. Only start and end states can be defined, and no intermediate states can be defined, which means there are only two states
  4. A transition rule can only define the change of one property, not more than one property.

Transition: property duration timing-function delay;

value describe
transition-property Specifies the name of the CSS property where the transition effect is set
transition-duration Specifies how many seconds or milliseconds it takes to complete the transition effect
transition-timing-function A velocity curve specifying the effect of the velocity
transition-delay Define when the transition effect begins

animation

In the official introduction, this property is an extension of the transition property, which makes up for many shortcomings of transition. I understand that animation is a superposition of multiple transition effects, and it is more operable, and can make complex and cool effects (if you love to do STH over and over again). Let’s introduce the power of animation with an example:

<! 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>
Copy the code

Analysis:

Let’s take a look at keyFrames, which defines a group of animations called ChangeBox, where 10%, 50%, 70%, and 100% represent the values of the properties at different points in time. For example, if the total time of the animation is 1s, then 10% is the animation between 0 and 0.1s. Through this, we can accurately control the property effect of any time point in the animation change, which greatly improves our control over the animation and is the basis for making complex animation. Let’s look at the whole eight values in the animation again, is it a bit exaggerated? I have never seen such a long value before. The control animation becomes very flexible, so let’s take a closer look at the syntax and what each value represents:

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

value describe
name Use to call the animation defined by @keyFrames, which is the same as the animation name defined by @keyFrames
duration Specifies how long the element plays the animation
timing-function The speed curve that defines the speed effect is the transformation rate for each small animation in the time range
delay Defines the amount of time to wait before the browser starts executing the animation. The value is the amount of time to wait before the entire animation executes
iteration-count Defines the number of times an animation can be played, optionally a specific number or infinite
direction Set the direction of the animation: normal(in chronological order),reverse(running in the opposite direction of the time axis),alternate(alternate, back and forth),alternate-reverse(running the animation backwards and forwards, and continuously running alternately)
play-state Controls the playing state of the element animation, which controls the pause and continuation of the animation with two values: RUNNING, paused
fill-mode Controls the style of the element at the end of the animation, with four values: None (back to the end of the animation), forwards(stays at the end of the animation), Backwords (back to the first frame), both(forwards and forwards in turn according to animation-direction), Be careful not to conflict with the Iteration -count (animation is executed an infinite number of times)

The difference between animation and Transition is that keyFrames provide more control, especially over the timeline. This makes CSS animation even more powerful. It allows some of flash’s animation effects to be controlled directly by CSS, all in just a few lines of code. As a result, a large number of CSS-BASED animation libraries were created to replace the animation part of Flash. I usually use Animate. CSS to Animate some of my projects. I hope I can use animation to implement the UI designer’s drawings perfectly

conclusion

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

There are some mistakes in the article

The Next Day is Always a New Day