Adding Two Animation to one Object [To an image]

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

Any help would be greatly appreciated. Thanks

stackoverflow.com/questions/14384494/…

smalinux
– smalinux

2016-09-22 08:04:11 +00:00
Commented Sep 22, 2016 at 8:04 — smalinux
– smalinux, Commented Sep 22, 2016 at 8:04

Mihai T · Accepted Answer · 2016-09-22 09:08:14Z

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

Collectives™ on Stack Overflow

Adding Two Animation to one Object [To an image]

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related