1つのオブジェクトに2つのアニメーションを追加する[画像にする]

Question

イメージに2つのアニメーションを与え、ページの読み込み時にバウンスし、2度目にバウンスした後にスウィングを開始する必要があります。 私は2つの異なるイメージでこれを達成しましたが、私はこれらの2つを1つにまとめると、1つのアニメーションだけが動いています。他のアニメーション効果が上書きされています。

swingingとbounceのJSfiddleを作成しました。

ul { list-style-type:none;} 
 
@-webkit-keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
} 
 
@keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg); 
 
       transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
} 
 
.swingimage { 
 
    -webkit-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite; 
 
    animation: swinging 3.5s ease-in-out forwards infinite; 
 
}

<ul class="nav navbar-nav pull-right"> 
 
    <li class=""> 
 
    <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage"   width="200" height="200" > </a> 
 
    </li> 
 
</ul>    

任意の助けいただければ幸いです。おかげ

Answer 1

はあなたが同じobject.soに2つの異なるアニメーションを追加することはできません。..

はimg

上liと（swinging）第二に最初のアニメーション（dropHeader）を使用jsfiddleを参照してください>jsFiddle

又は

下にスニペット第一方animation-delayを追加（swinging ）最初の1（dropHeader）の期間に等しいか、またはより大きなあなたが最初のものは、あなたのケースanimation-delay:0.5sや大きな

ul { list-style-type:none;} 
 
@-webkit-keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
} 
 
@keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg); 
 
       transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
} 
 
.swingimage { 
 
    -webkit-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite; 
 
    animation: swinging 3.5s ease-in-out forwards infinite; 
 
    animation-delay:0.5s; 
 
} 
 
.bounce-effect { 
 

 
    -moz-animation-name: dropHeader; 
 
    -moz-animation-iteration-count: 1; 
 
    -moz-animation-timing-function: ease-in-out; 
 
    -moz-animation-duration: 0.5s; 
 

 
    -webkit-animation-name: dropHeader; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-duration: 0.5s; 
 

 
    animation-name: dropHeader; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-in; 
 
    animation-duration: 0.5s; 
 
} 
 

 
@-moz-keyframes dropHeader { 
 
    0% { 
 
     -moz-transform: translateY(-40px); 
 
    } 
 
    100% { 
 
     -moz-transform: translateY(0); 
 
    } 
 
} 
 
@-webkit-keyframes dropHeader { 
 
    0% { 
 
     -webkit-transform: translateY(-40px); 
 
    } 
 
    100% { 
 
     -webkit-transform: translateY(0); 
 
    } 
 
} 
 
@keyframes dropHeader { 
 
    0% { 
 
     transform: translateY(-40px); 
 
    } 
 
    100% { 
 
     transform: translateY(0); 
 
    } 
 
}

<ul class="nav navbar-nav pull-right"> 
 
    <li class="bounce-effect "> 
 
    <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage"   width="200" height="200" > </a> 
 
    </li> 
 
</ul>