CSS3 using animation to add multiple animation effects to the same element

This post consists of: http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/

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

Requirements Description

For example, I want to achieve an animated effect like this:

A star slips down from the top and starts flashing when it falls to the specified position

Here are two animation effects: 1. Swipe down from top (single animation) 2. Flashing (looping animation)

Because CSS3 Animation is not able to define these two animated effects at the same time as the stars, we can only start with other directions.

Thinking about Solutions

I think, since you can't define two animations at the same time, can you define the second animation immediately after the element finishes executing the first animation, and then execute the one?

Start to try to solve the problem by thinking

First of all, how can you tell if the first animation is done? (This is the key, the problem is solved, the problem will be solved ...) )

After some searching, I found that I could 事件监听 implement this function by the way. (without Google, Baidu is also possible)

CSS3 Animation Event Monitoring

For example,-webkit-is not tested for browser compatibility (Chrome, Safari and Opera are valid for the appropriate kernel browser)

-webkit-animation animations actually have three events:

Start Event Webkitanimationstart (standard syntax is Animationstart)

End Event Webkitanimationend

Repeating motion event Webkitanimationiteration

So on demand, all I need to do is listen 结束事件 webkitAnimationEnd (there are other requirements that you can try to listen to other events, in this case the main)

Method Summary

The first animation effect is defined for the element, and the animation ends with JS listener, and when listening to the end of the first animation, remove the first animation effect and redefine the flashing animation effect.

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

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:sca  Le (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-tra Nsform:scale (1)} 55% {-webkit-transform:scale (1.1)} 100% {-weBkit-transform:scale (1)}} 

jquery Code (please add your own jquery class library):

    <div id="animationDiv" class="animation1"></div>    <script type="text/javascript" src="jquery.min.js"></script>    <script type="text/javascript">    var animationDiv = $("#animationDiv");    animationDiv.bind("webkitAnimationEnd", function() {        animationDiv.removeClass("animation1");        animationDiv.addClass("animation2");    });    </script>

Reference links

http://blog.csdn.net/kongjiea/article/details/38614695

CSS3 using animation to add multiple animation effects to the same element