This is the 17th day of my participation in the Genwen Challenge

This article is mainly an introduction to animation. If you are a beginner, you can quickly learn animation through this article. It can also be used as a development guide for those who forget some usage of animation.

Create an animation

The @keyframes rule is used to define animations

  • Sets the name of the animation
  • Sets the keyframe rules for animation

Let’s start by creating an animation called MyFirst

@keyframes myFirst {/* Keyframes are defined in this */}Copy the code

In animation, a keyframe is the point at which the action changes, and keyframe rules are used to set property values at specific points in the animation loop.

An animation requires at least two keyframes:

  1. From keyframe, which is the starting state of our animation,
  2. To frame, which is its end state.

Within each individual keyframe block, we can define the properties to animate:

@keyframes myfirst{ from { background: red; } to { background: blue; }}Copy the code

What this code is doing is changing our object from red to blue.

However, the KeyFrames rule defines only one animation. You also need to bind it to a selector, otherwise the animation will have no effect.

Example: Bind the “myFirst” animation to the div element. Duration: 2 seconds:

div
{
    animation: myfirst 2s;
}
Copy the code

Here, we use the animation property to set the animation name and duration. To play the animation, we need to write the name of the @Keyframes rule (in this case, myFirst) and the duration. Other attributes are optional.

Create multiple rule animations:

@frames pulse {from {transform: scale(0.5); } to { transform: scale(1); } } @keyframes fade { from { opacity: .8; } to { opacity: 1; }}Copy the code
.pulse-and-fade {
    animation: pulse 500ms, fade 500ms;
}
Copy the code

What this code means is that we scale our object from half its size to its full size and change the opacity from 80% to 100%.

Note: The above can also be divided into multiple rules, equivalent to the following code

@frames pulse {from {transform: scale(0.5); opacity: .8; } to { transform: scale(1); opacity: 1; } } .pulse { animation: pulse 500ms; }Copy the code

from… To and %

Keyframe from(0%)… To (100%), you can also use percentage keyframes to create more complex animations, and you can combine them with each other

@keyframes demo1{ 0% { background: red; } 50% { background: blue; } 100% { background: green; }}Copy the code
@keyframes demo2{ from { background: red; } 50% { background: blue; } to { background: green; }}Copy the code

Animation property list

Grammar:

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

animation-name

@keyframes Rule name

animation-duration

How long an animation cycle should last (negative time value does not work)

Initial value: 0s (no animation occurs)

Unit: seconds (s) or milliseconds (ms)

animation-timing-function

Sex specifies the speed curve of the animation.

Initial value: ease

Optional value:

  • Ease: An animation that starts slowly, then speeds up, then ends slowly (default)
  • Linear: an animation that runs at the same speed from beginning to end
  • Ease-in: an animation that starts slowly
  • Ease-out: An animation that ends slowly
  • Ease-in-out: Specifies the start and end of slow animations
  • Cubic – Bezier (n,n,n,n) : Runs your own value defined in the cubic Bezier function

animation-delay

How long to wait before executing the animation (negative time value is valid)

Default value: 0s (Executed immediately)

Unit: seconds (s) or milliseconds (ms)

animation-iteration-count

How many times does the animation repeat

Initial value: 1

Note: infinite times, you can use the keyword infinite

.pulse { animation-name: pulse; animation-duration: 500ms; animation-iteration-count: infinite; } /* equal to */. Pulse {animation: pulse 500ms infinite; }Copy the code

animation-direction

The playback direction of the animation

Initial value: Positive

Optional value:

  • Normal: The animation plays normally (forward). The default value
  • Reverse: Reverses the FROM and to states and plays the animation backwards
  • Alternate: Animation plays forward, then backward
  • Alternate -reverse: The animation plays backwards, then forwards

animation-fill-mode

Specifies the value of the property to apply while the animation is not running

Initial value: None

Optional value:

  • None: Defaults to the state before the animation started.
  • Forwards: Keep animations in the finished state
  • Backwards: Moving animation back to frame 1.
  • Both: Forwards and backwards rules are applied in rotation according to Animation-direction

Immediately after the animation ends, it jumps from the end state back to the start state. If you want to keep the animation in the end state, use the animation-fill-mode property.

animation-play-state

Whether the animation is running or paused

Initial value: RUNNING

Optional value:

  • running
  • paused

About Performance (not expanded in this article)

Some properties create better transitions and animations than others.

For example, transform: Translate (100px,200px)) can replace the top, left, right, and bottom features.

In some cases, height and width animations can be modified instead of scale.

How to Get Started with CSS Animation

Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞