Css3. You can add multiple animations to an element.

Css3. You can add multiple animations to an element.

For example:

. Screen3.on. text5 {

Animation: 1.4 s 3 s release-out forwards show, 1.6 s 4.4 s release forwards text5, 1.2 s 6 s linear infinite wobble;
-Webkit-animation: 1.4 s 3 s release-out forwards show, 1.6 s 4.4 s release forwards text5, 1.2 s 6 s linear infinite wobble;

}

@ Keyframes show {
0% {
Opacity: 0;
}
100% {
Opacity: 1;
}
}
@-Webkit-keyframes show {
0% {
Opacity: 0;
}
100% {
Opacity: 1;
}
}

@ Keyframes text5 {
0% {
Transform: scale (1, 0.8 );
}
50% {
Transform: scale (1, 1.2 );
}
100% {
Transform: scale (1, 0.8 );
}
}

 

@ Keyframes wobble {
0% {
Transform: translateX (0) rotate (0) scale (0.8 );
}
15% {
Transform: translateX (-2px) rotate (-1deg) scale (0.8 );
}
30% {
Transform: translateX (2px) rotate (1deg) scale (0.8 );
}
45% {
Transform: translateX (-2px) rotate (-1deg) scale (0.8 );
}
60% {
Transform: translateX (2px) rotate (1deg) scale (0.8 );
}
75% {
Transform: translateX (-2px) rotate (-1deg) scale (0.8 );
}
100% {
Transform: translateX (0px) rotate (0) scale (0.8 );
}
}
@-Webkit-keyframes wobble {
0% {
-Webkit-transform: translateX (0) rotate (0) scale (0.8 );
}
15% {
-Webkit-transform: translateX (-2px) rotate (-1deg) scale (0.8 );
}
30% {
-Webkit-transform: translateX (2px) rotate (1deg) scale (0.8 );
}
45% {
-Webkit-transform: translateX (-2px) rotate (-1deg) scale (0.8 );
}
60% {
-Webkit-transform: translateX (2px) rotate (1deg) scale (0.8 );
}
75% {
-Webkit-transform: translateX (-2px) rotate (-1deg) scale (0.8 );
}
100% {
-Webkit-transform: translateX (0px) rotate (0) scale (0.8 );
}
}
@-Webkit-keyframes text5 {
0% {
-Webkit-transform: scale (0.8 );
}
50% {
-Webkit-transform: scale (1.2 );
}
100% {
-Webkit-transform: scale (0.8 );
}
}

However, the animation playback time must be staggered.