同じ要素の2つのCSSアニメーションを連鎖させることはできません。最後のものだけが再生されます

Question

2つのCSSアニメーションをチェーン/マージしようとしています。最初が終わると、2番目のものが始まります。最初は、タイミングを調整し、アニメーションクラスを変換とマージしていました。今は、さまざまなアニメーションを連鎖させることが可能だと読んでいますが、私はそれをやろうとしていますが、動作していません。最後のアニメーションだけが再生されます。

あなたはそれが今働いているかどうかを知りたい場合（私に手がかりや助けを与える前に）coronafuneral.comを見てください。これは、画面の右側にある「接触者」テキストです。

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

私が気づいたのは、アニメーション名のイメーション：zoomInLeft、zoomOutDown;再生されるアニメーションはzoomInLeftです。

私は間違っていますか？私はその点を見ることができません。事前に おかげ

EDIT：これはそれだけで、最後のアニメーション（あなたのケースでは、スケール）

https://jsfiddle.net/7b5o2skb/

Answer 1

2同じタイプのアニメーションすることができます」を演奏し、今どのように動作するかこれは、フィドルです一方が他方

が上書きされますので、トンあなたはpでaをラップし、p

に aと一対一のアニメーションを割り当てることができ、同じ要素に割り当てることが

<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でことができるとは思わない

はここjsfiddle

HTMLを参照してください。あるアニメーションに別のアニメーションを何度も何度もやり直すように指示する必要があります。現在、cssでは、最初のアニメーションはアニメーションの終了直後に開始され、2番目のアニメーションはまだ終了していないため、初めて動作します。そう、彼らは