CSS Animation Guide: Teach you step-by-step to create shaking effects

CSS Animation Guide: Teach you step-by-step to create shaking special effects

In web design, animation effects are one of the important elements to improve user experience and attract users’ attention. CSS animation is a technology that uses pure CSS to achieve animation effects. Today, we will teach you step by step how to create a stunning shaking effect to make your web page more vivid and interesting.

First, let's create a basic HTML structure. The code is as follows:

Next, we need to add relevant style and animation definitions to the CSS file (assumed to be style.css here). The code is as follows:

.box { width: 100px; height: 100px; background-color: #f00; animation: shake 0.5s infinite; } @keyframes shake { 0% { transform: translate(0); } 25% { transform: translate(-10px, -10px); } 50% { transform: translate(10px, 10px); } 75% { transform: translate(-10px, -10px); } 100% { transform: translate(0); } }

In the above code, we added a 0.5 second animation effect to the.boxelement and set the animation name toshake. Then, we define the keyframes of theshakeanimation through the@keyframeskeyword.

In the keyframe, we set the style changes at five time points. 0% represents the starting state of the animation, and 100% represents the ending state of the animation. 25%, 50% and 75% respectively represent the intermediate state of the animation at different time points. By using thetransformattribute and thetranslatefunction, we can displace the element horizontally and vertically to achieve a trembling effect.

Finally, we need to save the above code as astyle.cssfile and associate it with the HTML file. Then, we can see our shaking effect in the browser.

The above are the complete steps for creating trembling special effects. You can adjust parameters such as animation duration, displacement, and color according to your needs to make it more suitable for your web design.

To summarize, CSS animation technology provides web designers with a simple and powerful way to achieve animation effects. By mastering relevant technologies and tools, you can easily add various animation effects to your web pages to enhance user experience and attract users' attention. I hope this article is helpful to you, and I wish you go further and further on the road of web design!

The above is the detailed content of CSS Animation Guide: Teach you step-by-step to create shaking effects. For more information, please follow other related articles on the PHP Chinese website!