CSS web page loading animation: create various cool loading animation effects

When users enter a web page, the most impatient thing is waiting for the page to load. In order to alleviate users' anxiety, many websites have begun to use CSS loading animations to make page loading more interesting. In this article, we will learn how to use CSS to create various cool loading animation effects, and provide specific code examples to help you implement it.

1. Basic animation

First let us create some basic loading animations. We can use the animation property in CSS to create a basic animation. The animation property has several sub-properties, as follows:

• animation-name: Select the name of the keyframe rule to be applied.
• animation-duration: Defines the duration of a cycle (in seconds or milliseconds).
• animation-timing-function: Define a cycle speed curve.
• animation-delay: Define the delay time of a cycle.
• animation-iteration-count: Defines the number of times the animation should play.

Now, let’s look at a few different types of basic loading animations.

1. Rotation animation

In this loading animation, we use the following code to define a rotation keyframe:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

The above code uses the @keyframes rule to define A keyframe named "rotate". In this keyframe, we use the transform attribute to define the rotation. In from and to, we define the degree of rotation, from 0 to 360 degrees.

Next, we need to specify this animation for our "loader" element:

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Flash animation

In this loading animation, we use the following code to Define a cyclic blinking keyframe:

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

The above code uses the @keyframes rule to define a keyframe named "blink". In this keyframe, we use the opacity property to define the transparency of the element. At 50%, we set it to 0.5, which will make it cycle between two states.

To apply this animation to our "loader" element, use the following code:

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Advanced Animation

Now, we have learned how to Create a basic loading animation in , let's further explore how to create more advanced animations. Here are some cool loading animations and their code examples.

1. Wave animation

In this loading animation, we use the following code to define the key frame of a wave mode:

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

In the above code, we use transform Properties to create waveform effects. At 0% and 100% positions, we set the element to its initial position. At the 50% position, we use translateX (horizontal translation) and translateY (vertical translation) to create the waveform.

Next, we specify this animation for our "loader" element:

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Diffusion animation

In this loading animation, we use the following code to define A diffusion keyframe:

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

In the above code, we use the transform attribute to create a diffusion effect. At 0% and 100% we set the element to its initial values ​​of minimization and transparency. At the 50% position, we use the scale property to create the diffusion animation.

Next, we specify this animation for our "loader" element:

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Summary

By using CSS, we can create various types of loading animations for our website . These loading animations can make page loading more interesting and relieve users' waiting anxiety. In this article, we learned how to create some basic loading animations, as well as how to make more advanced animations. I hope these code examples are helpful in your work.

The above is the detailed content of CSS web page loading animation: create various cool loading animation effects. For more information, please follow other related articles on the PHP Chinese website!