CSS3使用Animation為同一個元素添加多個動畫效果

本篇文章由：http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/

CSS3 Animation 並未提供 給一個元素同時添加多個動畫效果的方法，就是說一個元素，只能給它定義一個動畫效果，不能同時定義。

需求說明

比如說，我想實現一個這樣的動畫效果:

一顆星星從上往下滑落，當滑落到指定位置時開始閃爍

這里就用到了兩個動畫效果: 1. 從上往下滑落 (單次動畫) 2. 閃爍 (循環動畫)

因為 CSS3 Animation 是不能給星星這個元素同時定義這兩個動畫效果的，所以我們就只能從其它方向入手了。

思考解決方案

我是這樣想的，既然不能同時定義兩個動畫，那能不能在元素執行完第一個動畫時，立即定義第二個動畫，然后執行呢？

開始按照思路嘗試着解決問題

首先就是怎么才能判斷第一個動畫執行完了呢？(這是關鍵，這個問題解決了，問題也就迎刃而解了。。。)

經過一番查找，我發現可以通過 事件監聽 的方式，來實現這個功能。(沒有了 Google, Baidu 也是可以的)

CSS3 Animation 事件監聽

這里僅以 -webkit- 為例，並未測試瀏覽器兼容 (Chrome, Safari 和 Opera 相應內核瀏覽器有效)

-webkit-animation 動畫其實有三個事件：

開始事件 webkitAnimationStart (標准語法為 AnimationStart)

結束事件 webkitAnimationEnd

重復運動事件 webkitAnimationIteration

因此根據需求，我需要做的就是 監聽 結束事件 webkitAnimationEnd (有其它需求，可以嘗試監聽其它事件，這里以本例為主)

方法總結

先給元素定義第一個滑落的動畫效果，並且使用 JS 監聽動畫結束事件，當監聽到第一個動畫結束時，移除第一個動畫效果，重新定義閃爍的動畫效果。

邏輯清楚了，接下來就是實現。

實現功能

主要代碼如下:

CSS3 樣式:

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)} 
}

jQuery 代碼(請自行添加 Jquery 類庫):

<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>

參考鏈接

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