Example of implementing TikTok text shaking effect with CSS

In daily development, front-end students often argue over some animations and designs. The designers want to implement them with code, while the front-end designers want to design gif images. In the end, no one gives in, the designers leave, and the front-end designers are left to work overtime alone...

CSS technology is a skill that must be mastered by the front-end. Not only must it be mastered, but it must also be proficient in. With the current trend of front-end frameworks being prevalent, programmers have fewer and fewer opportunities to write styles. With component-based development, there is hardly a need to write a single line of CSS code for a page. Even if you don't write it, you must understand the principle behind it.

From the perspective of web page performance, animations that can be implemented with CSS should never use JS, and animations that can be implemented with JS should never use GIF. When executing animations, CSS can call the machine's GPU to execute, so its performance is naturally much better than JS. The above TikTok text shaking can be achieved using CSS animation by changing the shadow direction of the text and setting the blur effect of the looped animation frame. Knowing the principle will be much simpler. You might as well think about it more often in your daily life.

The effect diagram is as follows:

Attach the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
h2 {
  color: #fff;
  font-family: sans-serif;
  font-size: 4em;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0%, 100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}

This concludes this article about how to use CSS to implement TikTok text shaking effects. For more relevant CSS text shaking content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!