将两个动画添加到一个对象[到一个图像]

Question

我想要两个动画给一个图像一个是在页面加载时反弹，第二个是它应该开始摇摆，一旦它被反弹。我已经为两个不同的图像实现了这一点，但是，当我把这两个变成一个动画时，只有一个动画是有效的。另一个动画效果正在被覆盖。

我已经创建了一个用于摇摆和反弹的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

你不能在同一个对象上添加两个不同的动画，所以…

在li上使用第一个动画(dropHeader)，在img上使用第二个动画(swinging)

参见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>