Animation add multiple animation effects to the same element in CSS3

CSS3 Animation does not provide a way for an element to add multiple animation effects at the same time, that is, an element that can only define an animation effect and cannot be defined at the same time.

Requirements Description
For example, I want to achieve an animation effect like this:

A star slides down from the top and blinks when it falls to a specified position.

Here are two animation effects: 1. Slide down (single animation) 2. Flashing (looping animation)

Because CSS3 Animation can not give the star this element to define these two animation effects at the same time, so we can only start from the other direction.

Think about the solution
I think so, since you can't define two animations at once, can you define a second animation immediately after the element finishes the first animation, and then do it?

Start trying to solve the problem by thinking

The first is how to determine the first animation is finished? (This is the key, the problem solved, the problem will be solved ...) )

After a search, I found that this function can be realized by the way of event listening. (without Google, Baidu is also possible)

CSS3 Animation Event Monitor
For example,-webkit-is not tested for browser compatibility (Chrome, Safari and Opera corresponding kernel browsers are available)

The-webkit-animation animation actually has three events:

Start Event Webkitanimationstart (standard syntax is Animationstart)

End Event Webkitanimationend

Repetitive motion Events Webkitanimationiteration

 so according to demand, all I have to do is listen to the End event Webkitanimationend (there are other requirements, you can try to listen to other events, this example is mainly)

Method Summary
First to define the animation effect of a slide, and use JS to listen to the animation end event, when listening to the end of the first animation, remove the first animation effect, redefine the flashing animation effect.

The logic is clear, and the next step is realization.

Implementation features
The main code is as follows:

CSS3 Style:

div {
width:100px;
height:100px;
background:red;
position:relative;
}
. animation1 {
Animation:upin 2s ease;
-webkit-animation:upin 2s ease;
}
. animation2 {
Animation:beat 93s Infinite Ease;
-webkit-animation:beat 93s Infinite Ease;
}
@keyframes upin{
0% {
opacity:0;
Transform:translatey (-100%)
}
100% {
Opacity:1;
Transform:translatey (0)
}
}
@-webkit-keyframes upin{
0% {
opacity:0;
-webkit-transform:translatey (-100%)
}
100% {
Opacity:1;
-webkit-transform:translatey (0)
}
}
@keyframes beat {
0% {-webkit-transform:scale (1)}
15% {-webkit-transform:scale (1.2)}
30% {-webkit-transform:scale (1)}
55% {-webkit-transform:scale (1.1)}
100% {-webkit-transform:scale (1)}
}
@-webkit-keyframes beat {
0% {-webkit-transform:scale (1)}
15% {-webkit-transform:scale (1.2)}
30% {-webkit-transform:scale (1)}
55% {-webkit-transform:scale (1.1)}
100% {-webkit-transform:scale (1)}
}

Code (add the Jquery class Library yourself):

<div id= "Animationdiv" class= "Animation1" ></DIV>
<script type= "Text/javascript" Jquery.min.js "></script>
<script type=" Text/javascript "
var animationdiv = $ (" #animationDiv " );
Animationdiv.bind ("Webkitanimationend", function () {
    animationdiv.removeclass (" Animation1 ");
    animationdiv.addclass ("Animation2");
});
</script>