CSS to achieve fast and cool shaking animation effect

CSS to achieve fast and cool shaking animation effect

1. Introduction to Animate.css

Animate.css is a ready-to-use cross-browser animation library for use in your web projects. Perfect for emphasis, front pages, sliders and attention-directing prompts. It is a CSS3 animation library from abroad. It presets more than 60 animation effects such as shake, flash, bounce, flip, rotateIn/rotateOut, fadeIn/fadeOut, etc., covering almost all common animation effects. Although Animate.css can be used to easily and quickly create CSS3 animation effects, it is still recommended to take a look at the Animate.css code. Maybe you can learn something from it. It can be used normally both on the Web and in the mini program. Please go to the official address to learn for details.

2. Implementation of animation effects

During use, you can modify the CSS code according to your preferences to achieve the effect you want. The animated graphics in the article may not be particularly intuitive. It is recommended that you write the code yourself, which is conducive to learning and can intuitively experience the animation effect.

1. Glowing Box

a829c006974b702afb40c13b3e833c8b.png

wxml code:

<view id="box">I am LetCode!</view>

wxss code:

@keyframes animated-border {  
0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4);  
100% { box-shadow: 0 0 0 20px rgba(255,255,255,0); } 
} 
#box { 
  animation: animated-border 1.5s infinite;
  height: 100rpx;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 2px solid;
  border-radius: 10px;
  margin: 100px 15px;
  line-height: 100rpx;
  text-align: center;
}

2. Text scaling effect

ac817519e904d565088807ebffd940ec.png

wxml code:

<view class="animate_zoomOutDown">Follow the public account "Java Technology Fans" for more sharing! </view>

wxss code:

@keyframes zoomOutDown 
{  
40% 
{  
opacity: 1; 
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);  
}  
to 
{ 
opacity: 0; 
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);   
} 
}
.animate_zoomOutDown
{ 
animation:2s linear 0s infinite alternate zoomOutDown; 
font-family: Arial;  
font-size: 18px;  
font-weight: bold;  
color: white;  
margin-top: 70px; 
text-align: center;  
margin-top: 15px; 
}

3. Loading animation

8a2883678ecba7c2a639925431bfe289.png

wxml code:

<view class="load-container load">  
<view class="loader">  
</view> 
</view> 
<view class="txt">Follow the public account "Java Technology Fans" for more sharing! </view>

wxss code:

 .load-container
 { 
 width: 240px; 
 height: 240px; margin: 0 auto; 
 position: relative;  
 overflow: hidden;
 box-sizing: border-box;
 }  
 .load .loader 
 {  
 color: #ffffff; font-size: 90px; text-indent: -9999em; overflow: hidden;  
 width: 1em; height: 1em; border-radius: 50%;  
 margin: 72px auto;  
 position: relative; transform: translateZ(0); 
 animation: load 1.7s infinite ease, round 1.7s infinite ease; 
 } @keyframes load
 {  
 0% 
 { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
 }  
 5%, 95% 
 { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
 } 
 10%, 59% 
 {
 box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
 } 
 20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
 } 
 38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
 } 
 100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
 } 
 } 
 @keyframes round
 { 
 0% 
 { 
 transform: rotate(0deg);    
 } 
 100% 
 {  
 transform: rotate(360deg);     
 } 
 }

4. Shaking text

22f97e304886a5f7e76bb9f4b623f549.png

wxml code:

<view class="shake-slow txt">Follow the public account "Java Technology Fans" for more sharing! </view>

wxss code:

@keyframes shake-slow 
{ 
2%
{ 
transform: translate(6px, -2px) rotate(3.5deg);  
}  
4% 
{  
transform: translate(5px, 8px) rotate(-0.5deg);  
}  
6% 
{ transform: translate(6px, -3px) rotate(-2.5deg);   
}  
8% 
{ transform: translate(4px, -2px) rotate(1.5deg);  
}   
10% 
{  
transform: translate(-6px, 8px) rotate(-1.5deg);  
}   
12% 
{ 
transform: translate(-5px, 5px) rotate(1.5deg);  
} 
14% { transform: translate(4px, 10px) rotate(3.5deg);  
} 16% { transform: translate(0px, 4px) rotate(1.5deg); 
} 18% { transform: translate(-1px, -6px) rotate(-0.5deg); 
} 20% { transform: translate(6px, -9px) rotate(2.5deg); 
}  
22% { transform: translate(1px, -5px) rotate(-1.5deg);  
} 24% { transform: translate(-9px, 6px) rotate(-0.5deg); 
} 26% { transform: translate(8px, -2px) rotate(-1.5deg);   
}   
28% { transform: translate(2px, -3px) rotate(-2.5deg); }   
30% 

{ transform: translate(9px, -7px) rotate(-0.5deg); }   
32% 
{ transform: translate(8px, -6px) rotate(-2.5deg); }   
34%
{ transform: translate(-5px, 1px) rotate(3.5deg); }   
36%
{ transform: translate(0px, -5px) rotate(2.5deg); }   
38% 
{ transform: translate(2px, 7px) rotate(-1.5deg); }   
40% 
{ transform: translate(6px, 3px) rotate(-1.5deg); }   
42% 
{ transform: translate(1px, -5px) rotate(-1.5deg); }   
44%
{ transform: translate(10px, -4px) rotate(-0.5deg); }  
46% { transform: translate(-2px, 2px) rotate(3.5deg); }   
48% { transform: translate(3px, 4px) rotate(-0.5deg); }   
50% { transform: translate(8px, 1px) rotate(-1.5deg); }   
52% { transform: translate(7px, 4px) rotate(-1.5deg); }   
54% { transform: translate(10px, 8px) rotate(-1.5deg); }   
56% { transform: translate(-3px, 0px) rotate(-0.5deg); }   
58% { transform: translate(0px, -1px) rotate(1.5deg); }   
60% { transform: translate(6px, 9px) rotate(-1.5deg); }  
62% { transform: translate(-9px, 8px) rotate(0.5deg); }  
64% { transform: translate(-6px, 10px) rotate(0.5deg); }  
66% { transform: translate(7px, 0px) rotate(0.5deg); }   
68% { transform: translate(3px, 8px) rotate(-0.5deg); }  
70% { transform: translate(-2px, -9px) rotate(1.5deg); }  
72% { transform: translate(-6px, 2px) rotate(1.5deg); }   
74% { transform: translate(-2px, 10px) rotate(-1.5deg); }  
76% { transform: translate(2px, 8px) rotate(2.5deg); }  
78% { transform: translate(6px, -2px) rotate(-0.5deg); }   
80% { transform: translate(6px, 8px) rotate(0.5deg); }  
82% { transform: translate(10px, 9px) rotate(3.5deg); }   
84% { transform: translate(-3px, -1px) rotate(3.5deg); }   
86% { transform: translate(1px, 8px) rotate(-2.5deg); }   
88% { transform: translate(-5px, -9px) rotate(2.5deg); }  
90% { transform: translate(2px, 8px) rotate(0.5deg); }  
92% { transform: translate(0px, -1px) rotate(1.5deg); }  
94% { transform: translate(-8px, -1px) rotate(0.5deg); }   
96% { transform: translate(-3px, 8px) rotate(-1.5deg); }  
98%

{  
transform: translate(4px, 8px) rotate(0.5deg);   
}  
0%,100%
{ 
transform: translate(0, 0) rotate(0);  
}
}  
.shake-slow
{ 
animation:shake-slow 5s infinite ease-in-out;
}

In the actual development process, there are far more than these cool animation effects. With the rapid development of the Internet, more programmers are needed to realize functional requirements. Therefore, this article only makes a brief introduction. To be continued...

This is the end of this article about how to achieve fast and cool shaking animation effects with CSS. For more relevant CSS shaking effect 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!

<<:  Move MySQL database to another disk under Windows

>>:  Summary of the Differences between find() and filter() Methods in JavaScript

Recommend

JavaScript canvas implements graphics and text with shadows

Use canvas to create graphics and text with shado...

How to use custom images in Html to display checkboxes

If you need to use an image to implement the use ...

In-depth analysis of Linux NFS mechanism through cases

Continuing from the previous article, we will cre...

Detailed explanation of Linux environment variable configuration strategy

When customizing the installation of software, yo...

MySQL Series Database Design Three Paradigm Tutorial Examples

Table of contents 1. Knowledge description of the...

Detailed explanation of Web front-end performance optimization: resource merging and compression

Resource merging and compression for two purposes...

Detailed explanation of how to deploy and install the Chinese version of Redash in Docker

1. Installation Instructions Compared with local ...

js to achieve a simple lottery function

This article shares the specific code of js to im...

JavaScript to achieve a simple message board case

Use Javascript to implement a message board examp...

Detailed explanation of explain type in MySQL

Introduction: In many cases, many people think th...

Detailed explanation of the difference between MySQL null and not null and null and empty value ''''

I believe that many people who have used MySQL fo...

Example code for mixing float and margin in CSS

In my recent studies, I found some layout exercis...

Detailed explanation of the process of installing msf on Linux system

Or write down the installation process yourself! ...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

Example of how to check the capacity of MySQL database table

This article introduces the command statements fo...