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

问题描述：

我希望两个动画被赋予一个图像，一个在页面加载时反弹，第二个是它应该开始摆动，一旦它被反弹。我已经完成了这两个不同的图像，但是，当我把这两个揉成一个只有一个动画正在工作。其他动画效果正在被覆盖。将两个动画添加到一个对象[到图像]

我已经为swinging和bounce创建了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>

任何帮助将不胜感激。由于

HTTP的第一个完成

后启动的第一个（dropHeader）的持续时间： //sackoverflow.com/questions/14384494/multiple-css-keyframe-animations-using-transform-property-not-working –

答

你不能添加2个不同的动画相同object.so ..

使用的img

在li和第二（swinging）第一动画（dropHeader）看到的jsfiddle>jsFiddle

或摘录下面

在第二个加animation-delay（swinging ）等于或更大，如果你想在你的情况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>

谢谢@Mihai T.它就像一个魅力！ – tata

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

相关推荐