This is the 27th day of my participation in the August More Text Challenge

The wheel

A very important rule: don’t reinvent the wheel.

CSS animation from the code is not simple, each animation effect involves many parameters, to achieve the appropriate animation effect needs to be broken to adjust the animation parameters, such as animation, animation frame segmentation, animation speed regulation function and so on. And most people use the animation effect is actually just a few, such as shake, concussion and so on, compared to everyone of us write animation from scratch, whether someone will be commonly used animation summed up to let us use it.

Some!

A few I found online are listed here:

Ready-made animation library

  1. Animate. CSS, the most famous animation library;
  2. Magic. CSS project home PAGE I said I did not understand, click no effect;
  3. An enhanced version of Vivify animate. CSS
  4. Effect.css
  5. Hover. CSS hover effect animation;
  6. wickedCSS
  7. Three-dots animation effect demonstration, very interesting
  8. Csshake shake animation effect collection

Visual CSS animation – Animation generator

  1. animista.net/
  2. angrytools

Let’s take a look at how animate. CSS can be used in your own projects.

How do I use animate. CSS

Take frameless HTML+CSS as an example.

As shown in the code and figure below, we begin by drawing a light blue square.

<! DOCTYPEhtml>
<head>
    <title>Animate. CSS uses tests</title>
  </head>
  <body>
      <div class="box"></div>
  </body>
  <style>
      .box {
          width: 300px;
          height: 300px;
          background: lightblue;
      }

  </style>
</html>
Copy the code

Preliminary renderings:

Importing resource files

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
Copy the code

Adds a class to the specified object

We need to add two classes to the specified object:

  1. animate__animated
  2. Animate__xxx, where XXX stands for such asbounce,flash, etc.

For example, if we add animate__animated animate__bounce, the animation looks like this:

Well, it worked! Let’s switch to something more obvious: Animate__hinge

NICE JOB!!

The code is very simple, all the above code is as follows:

<! DOCTYPEhtml>
<head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <title>Animate. CSS uses tests</title>
  </head>
  <body>
      <div class="box animate__animated animate__hinge"></div>
  </body>

  <style>
      body {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
      }
      .box {
          width: 300px;
          height: 300px;
          background: lightblue;
      }
  </style>
</html>
Copy the code

In the animate. CSS website, the other Settings allowed in the animate. CSS are described in detail, such as animation delay time, animation playback times and so on, which can be implemented with simple code.

Well, I don’t have to worry about the designer’s bizarre animations anymore!