Adding two animations to one object [To image]

Question

I want the two animations to be assigned to the image, which is a failure to load the page, and the second - it should start to wave after it bounces. I achieved this for two different images, but when I do this, one animation only works. Another animation effect is overwritten.

I created 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="">
   <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>                  

Run codeHide result

Any help would be greatly appreciated. Thanks

Answer 1

you CANNOT add 2 different animations to the same .so object.

(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>                  

Hide result