Добавление двух анимаций к одному объекту [К изображению]

Question

Я хочу, чтобы две анимации были присвоены изображению, которое отскакивает от загрузки страницы, а второе - оно должно начинать качаться после его отскока. Я достиг этого для двух разных изображений, но, когда я занимаюсь этим, в один только один анимационный фильм работает. Другой эффект анимации перезаписывается.

Я создал JSfiddle для swinging и bounce.

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

вы не можете добавить 2 различных анимаций к тому же object.so ..

использовать первую анимацию (dropHeader) на li и второй (swinging) на img

см jsfiddle>jsFiddle

или фрагмент кода ниже

добавить animation-delay на второй (swinging) Равна или больше длительности первого (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>