Adding Two Animation to one Object [To an image] - css

Question

I want two animations to be given to an image one is bounce on page load and the second one is it should start swinging once it is bounced.
I have achieved this for two different images but, when I am clubbing these two into one only one animation is working. The other animation effect is getting overwritten.
I have created a JSfiddle for swinging and 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="">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage" width="200" height="200" >
</li>
</ul>
Any help would be greatly appreciated. Thanks

Answer 1

you CAN NOT add 2 different animations to the same object.so..
use the first animation ( dropHeader ) on the li and the second ( swinging ) on the img
see jsfiddle > jsFiddle
or snippet below
add animation-delay on the second one ( swinging ) equal or bigger to the duration of the first one ( dropHeader ) if you want it to start after the first one has finished
in your case animation-delay:0.5s or bigger
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 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage" width="200" height="200" >
</li>
</ul>