Project Practice: Experience Sharing on How to Use CSS Animation to Create Cool Effects

CSS animation is one of the techniques commonly used by many front-end developers. It can achieve some very interesting effects, such as cool buttons, smooth page loading effects, and dynamic page content. etc. In this article, I will share some experiences on how to use CSS animations to create cool effects. Let’s take a look!

1. Basic knowledge of making animation

Before we start making animation, we need to understand some basic knowledge. First, if we want to use CSS animation, we need to understand the concept of "animation" in CSS. CSS animation is implemented through keyframes. Keyframes refer to certain states within a certain period of time, and there are transitions between these states. For example, we can set the position of an element at the first second to (0,0) and the position at the second second to (100,100). Through CSS animation, the element will move along this path. .

Secondly, we need to understand the syntax of CSS animation. The following is a simple example:

@keyframes example {
  0% {transform: translateX(0);}
  50% {transform: translateX(100px);}
  100% { transform: translateX(0);}
}

.example {
  animation: example 1s ease-in-out infinite;
}

This example specifies the state of the animation through @keyframes and applies the animation to specific elements through the .example class. In the above code, we define an animation named example, which has three states: 0%, 50%, and 100%. At 0%, the position of the element is the initial position, that is, the displacement in the X-axis direction is 0. At 50%, the element's position is moved 100 pixels to the right. At 100%, the element is back to its original position. Finally, we apply animation to the .example element through the animation attribute.

This is just a simple example. Of course, there are many other syntax and properties that can be used in CSS animations, such as animation-duration, animation-delay, animation-timing-function, etc. In the actual production process, we need to flexibly use these attributes according to specific needs.

2. Tips for making cool effects

After mastering the basic knowledge of CSS animation, we can start to create some cool effects. Below I will share some practical skills:

2.1 Making button animations

Making button animations is a very common need. Below we will use "shaking button" as an example to introduce how to use CSS animation to achieve this effect.

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

button {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

The above code defines an animation named shake and then applies it to a button. In this animation, we realize the movement effect of the button through the transform attribute, and adjust the easing effect of the animation through the cubic-bezier function. After applying this animation to the button, you can see the "shaking" effect we expect.

2.2 Pictures flying in and out

This effect is a bit like a slideshow. Each time a picture flies in from the top or bottom, and then the previous picture flies out from the top or bottom. . The following code achieves this effect:

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.slide-show {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide-show img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; 
}

.slide-show .slide1 {
  animation-name: slideIn;
}

.slide-show .slide2 {
  animation-name: slideOut;
}

.slide-show .slide2.active {
  animation-name: slideIn;
}

In the above code, we define two animations named slideIn and slideOut, thereby achieving the effect of the picture flying in and out. Then wrap the pictures through a container .slide-show, and assign a different class name to each picture (such as .slide1, .slide2). When we need to switch pictures, we only need to change the class name of the current picture to "active" and then use JavaScript to operate the DOM.

The above two examples are just the tip of the iceberg of CSS animation. We hope to help readers better master CSS animation and create more cool effects.

The above is the detailed content of Project Practice: Experience Sharing on How to Use CSS Animation to Create Cool Effects. For more information, please follow other related articles on the PHP Chinese website!