在同一元素中鏈接兩個css動畫無法正常工作。只有最後一個播放

Question

我試圖鏈/合併兩個CSS動畫。當第一個結束時，第二個必須開始。開始時我正在調整時間並將動畫類與轉換合併。現在我讀到可以鏈接不同的動畫，但儘管我試圖去做，但它不起作用。只有最後一個動畫正在播放。

如果你想看看它現在如何工作（在你給我任何線索或幫助之前）看看coronafuneral.com。它是屏幕右側的「Contactar」文本。

.animacion_telefono { 
 
    /* this is the class I attach to the anchor <a> text to animate */ 
 
    animation-delay: 0s, 1.5s; 
 
    -webkit-animation-delay: 0s, 1.5s; 
 
    -webkit-animation-duration: 1s, 3s; 
 
    animation-duration: 1s, 3s; 
 
    -webkit-animation-name: zoomInLeft, zoomOutDown; 
 
    animation-name: zoomInLeft, zoomOutDown; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-iteration-count: infinite; 
 
} 
 

 
@-webkit-keyframes zoomInLeft { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
 
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
 
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    } 
 
} 
 

 
@keyframes zoomInLeft { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
 
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
 
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    } 
 
} 
 

 
@-webkit-keyframes zoomOutDown { 
 
    40% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
 
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
 
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
 
    -webkit-transform-origin: center bottom; 
 
    transform-origin: center bottom; 
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    } 
 
} 
 

 
@keyframes zoomOutDown { 
 
    40% { 
 
    opacity: 1; 
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
 
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
 
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
 
    -webkit-transform-origin: center bottom; 
 
    transform-origin: center bottom; 
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
 
    } 
 
}

<div id="contact-link" style="width: 150px; height: 150px; background-color: red;"> 
 
    <a style="display:block;" class="animacion_telefono" href="http://coronafuneral.com/contactanos" title="Contact us">Contact us</a> 
 
</div>

這是zoomOutDown動畫，播放了只有一個：

@-webkit-keyframes zoomOutDown { 
    40% { 
     opacity: 1; 
     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
     transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
     -webkit-transform-origin: center bottom; 
     transform-origin: center bottom; 
     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
    } 
} 
@keyframes zoomOutDown { 
    40% { 
     opacity: 1; 
     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 
     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
     transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 
     -webkit-transform-origin: center bottom; 
     transform-origin: center bottom; 
     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
    } 
} 

這是不工作的CSS動畫：

@-webkit-keyframes zoomInLeft { 
    0% { 
     opacity: 0; 
     -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
     transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
     transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
    } 
} 
@keyframes zoomInLeft { 
    0% { 
     opacity: 0; 
     -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
     transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 
     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
     transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 
     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
    } 
} 

我注意到，如果我改變了一個動畫名稱中的imations：zoomInLeft，zoomOutDown;那麼播放的動畫就是zoomInLeft。

我做錯了什麼？我看不到這一點。 在此先感謝

編輯：這是小提琴，這是它是如何工作的，現在，只打了最後的動畫相同類型的

https://jsfiddle.net/7b5o2skb/

Answer 1

2動畫（規模在你的情況下）可以」 T爲分配到相同的元素，因爲一個會覆蓋其他

，你可以在一個p包裹a和一個動畫分配給a和一個p

看到這裏jsfiddle

HTML：

<p class="animateme"> 
    <a style="display:block;" class="animacion_telefono" href="http://coronafuneral.com/contactanos" title="Contact us">Contact us</a> 
</p> 

CSS：

p.animateme { 
animation-delay: 1.5s; 
-webkit-animation-delay: 1.5s; 

-webkit-animation-duration: 3s; 
animation-duration: 3s; 

-webkit-animation-name: zoomOutDown; 
animation-name: zoomOutDown; 

-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 

animation-iteration-count: 1; 
-webkit-animation-iteration-count: 1; 

} 

但製作動畫永遠持續下去（無限），我不認爲你只能用CSS。你必須告訴一個動畫一次又一次地開始。現在，用CSS，它只能第一次工作，因爲第一個動畫在動畫完成後立即開始，第二個動畫還沒有完成。所以他們將動畫的同時元素（除了它們動畫第一次）

這可以用JQ而不是CSS來實現