CSS3中Animation爲同一個元素添加多個動畫效果

時間 2019-11-18

標籤 css3 css animation 同一個元素添加多個動畫效果欄目 CSS 简体版

原文原文鏈接

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

需求說明
好比說，我想實現一個這樣的動畫效果:html

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

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

由於 CSS3 Animation 是不能給星星這個元素同時定義這兩個動畫效果的，因此咱們就只能從其它方向入手了。web

思考解決方案
我是這樣想的，既然不能同時定義兩個動畫，那能不能在元素執行完第一個動畫時，當即定義第二個動畫，而後執行呢？瀏覽器

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

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

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

CSS3 Animation 事件監聽
這裏僅以 -webkit- 爲例，並未測試瀏覽器兼容 (Chrome, Safari 和 Opera 相應內核瀏覽器有效)htm

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

開始事件 webkitAnimationStart (標準語法爲 AnimationStart)

結束事件 webkitAnimationEnd

重複運動事件 webkitAnimationIteration

所以根據需求，我須要作的就是監聽結束事件 webkitAnimationEnd (有其它需求，能夠嘗試監聽其它事件，這裏以本例爲主)

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

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

實現功能
主要代碼以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</title>
<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)} 
}
</style>
</head>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。