將兩個動畫添加到一個對象[到圖像]

我希望兩個動畫被賦予一個圖像，一個在頁面加載時反彈，第二個是它應該開始擺動，一旦它被反彈。我已經完成了這兩個不同的圖像，但是，當我把這兩個揉成一個只有一個動畫正在工作。其他動畫效果正在被覆蓋。將兩個動畫添加到一個對象[到圖像]

我已經爲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>

任何幫助將不勝感激。由於

來源

2016-09-22 tata

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>

來源

2016-09-22 08:34:51

謝謝@Mihai T.它就像一個魅力！ – tata

將兩個動畫添加到一個對象[到圖像]

回答

相關問題