CSS Animation: How to Achieve the Jitter Effect of Elements-CSS Tutorial-php.cn

CSS Animation: How to Achieve the Jitter Effect of Elements

王林

Release： 2023-11-21 09:36:11

Original

1497 people have browsed it

CSS Animation: How to Achieve the Jitter Effect of Elements

CSS animation: How to achieve the jitter effect of elements

Abstract: CSS animation is a commonly used effect in web design. It can add dynamics and vividness to web pages. Feel. This article will introduce how to use CSS animation to achieve the jitter effect of elements, and attach specific code examples for reference.

Introduction

In web design, animation effects can attract users’ attention and increase users’ interactivity and experience with web pages. Among them, CSS animation, as a simple and lightweight implementation method, is widely used in web design.

Basic principles of CSS animation

CSS animation is achieved by changing the CSS property value of the element. In CSS, you can use the @keyframes keyword to define key frames, and then use the animation attribute to specify the duration, speed, number of repetitions and other attributes of the animation.

The basic idea of implementing the jitter effect of elements

The jitter effect of elements is actually simulated by letting the element change its position quickly. The specific implementation steps are as follows:

(1) Define the key frames of the jitter animation

Use the @keyframes keyword to define the key frames of the jitter animation. Key frames include a start state and an end state. By specifying the position of the element in the key frame, the element can achieve a jitter effect within a specified time period.

The sample code is as follows:

@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 0); }
  20% { transform: translate(10px, 0); }
  30% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  50% { transform: translate(-10px, 0); }
  60% { transform: translate(10px, 0); }
  70% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  90% { transform: translate(-10px, 0); }
  100% { transform: translate(0, 0); }
}

Copy after login

(2) Add animation attributes to elements

Use animation attributes to add animation attributes to elements and specify the animation Properties such as name, duration, number of repetitions, etc.

The sample code is as follows:

.element {
  animation: shake 1s infinite;
}

Copy after login

Complete sample code

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes shake {
      0% { transform: translate(0, 0); }
      10% { transform: translate(-10px, 0); }
      20% { transform: translate(10px, 0); }
      30% { transform: translate(-10px, 0); }
      40% { transform: translate(10px, 0); }
      50% { transform: translate(-10px, 0); }
      60% { transform: translate(10px, 0); }
      70% { transform: translate(-10px, 0); }
      80% { transform: translate(10px, 0); }
      90% { transform: translate(-10px, 0); }
      100% { transform: translate(0, 0); }
    }

    .element {
      animation: shake 1s infinite;
    }
  </style>
</head>
<body>
  <div class="element">抖动效果</div>
</body>
</html>

Copy after login

Summary

CSS animation is A simple, lightweight way to achieve animation effects. By using the @keyframes keyword and animation attributes, various animation effects can be achieved. This article introduces how to use CSS animation to achieve the jitter effect of elements, and provides specific code examples for reference. I hope this article can help readers better understand and apply the relevant knowledge of CSS animation.

The above is the detailed content of CSS Animation: How to Achieve the Jitter Effect of Elements. For more information, please follow other related articles on the PHP Chinese website!