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

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

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

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

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