animate.css is a good CSS3 preset animation library and a good CSS3 animation learning resource. Let's analyze the implementation principle of the bounce effect, and implement your own CSS animation on this basis.
First move the bounce effect out of animate.css separately, without considering the support for different browsers, test the browser as chrome, and take a look at the effect.
<!DOCTYPE html>
<html>
<head>
<title>bounce-source</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<style type="text/css">
html {
font: 100%/1.5 "Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
}
.font-style{
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 10s infinite linear;
}
h1{
margin-bottom: 1.5rem;
font-size: 6rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
</style>
<style type="text/css">
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
</style>
</head>
<body>
<header>
<div>
<span style="display: block;" class="bounce animated infinite"><h1 class="font-style">bounce</h1></span>
</div>
</header>
</body>
</html>Take a look at some common properties
- animation-duration: 1s Specifies that the animation is executed with a delay of 1S, and the entire animation process is 1S, which can be adjusted according to the actual situation;
- animation-fill-mode: both specifies that the animation fill mode is front and rear fill, and the animation wait and animation end states of bounce keep the first and last frame states of keyframes respectively;
- transform-origin: center bottom specifies that the base point of animation execution is the bottom of the middle, and the base point of the animation object's bouncing, which is roughly understood as the center of gravity in the middle and bottom position of the object;
- animation-iteration-count: infinite Specifies the number of animation executions, which can be adjusted according to the actual situation.
After the basic attribute definition is completed, look at the specific process of animation execution
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}It doesn't seem intuitive enough, so let's sort it out first
@keyframes bounce {
0%, 20%{
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
53%{
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
80%{
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
90% {
transform: translate3d(0,-4px,0);
}
100% {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
}This looks much clearer, and the general process can be represented by the following figure
- 0% - 53% completed the first bounce with a height of 30px
- 53%-80% completed the second bounce with a height of 15px
- 80%-100% completed the third bounce with a height of 4px
- The bounce time ratio is about 5:3:2, and the height ratio is about 8:4:1
- The speed of the bouncing ascending stage is first fast and then slow, and the speed of the descending stage is slow first and then fast
Speed Bezier curve in the ascent phase
Speed Bezier curve during descent
For Bezier curves, see another CSS3 cubic Bezier curve (cubic-bezier)
think
Can ease-out and ease-in be used to replace the ascending and descending processes, respectively, to complete 4 bounces.
design
- The bounce time ratio is about 9:5:3:2, the height ratio is about 14:8:4:1, and the animation duration is 1.5S
- 0%-47% complete the first bounce, with a height of 42px
- 47%-73% complete the second bounce, with a height of 24px
- 73%-89% complete the third bounce with a height of 12px
- 89%-100% complete the fourth bounce with a height of 3px
@keyframes bounce {
0%, 15%, 47%, 73%,89%,100% {
animation-timing-function: ease-out;
transform: translate3d(0,0,0);
}
30%, 32% {
animation-timing-function: ease-in;
transform: translate3d(0, -42px, 0);
}
60% {
animation-timing-function: ease-in;
transform: translate3d(0, -24px, 0);
}
82% {
animation-timing-function: ease-in;
transform: translate3d(0, -12px, 0);
}
94% {
animation-timing-function: ease-in;
transform: translate3d(0,-3px,0);
}
}<!DOCTYPE html>
<html>
<head>
<title>bounce-demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<style type="text/css">
html {
font: 100%/1.5 "Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
}
.font-style{
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 10s infinite linear;
}
h1{
margin-bottom: 1.5rem;
font-size: 6rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
</style>
<style type="text/css">
.animated {
animation-duration: 1.5s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}
@keyframes bounce {
0%, 15%, 47%, 73%,89%,100% {
animation-timing-function: ease-out;
transform: translate3d(0,0,0);
}
30%, 32% {
animation-timing-function: ease-in;
transform: translate3d(0, -42px, 0);
}
60% {
animation-timing-function: ease-in;
transform: translate3d(0, -24px, 0);
}
82% {
animation-timing-function: ease-in;
transform: translate3d(0, -12px, 0);
}
94% {
animation-timing-function: ease-in;
transform: translate3d(0,-3px,0);
}
}
</style>
</head>
<body>
<header>
<div>
<span style="display: block;" class="bounce animated infinite"><h1 class="font-style">bounce</h1></span>
</div>
</header>
</body>
</html>Attachment: animate.css animation library download address: https://daneden.github.io/animate.css/