CSS動畫不起作用（反彈）

Question

我想知道爲什麼我的彈跳動畫在JSFiddle沒有工作，但在我的開發網站工作。請檢查這個有什麼問題。在我的開發網站中，箭頭反彈但不像我的css類中告訴的那樣旋轉。

.active.ongoing::before { 
 
    content: "\f175"; 
 
    font-family: FontAwesome; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    color: #56a4da; 
 
    font-size: 28px; 
 
    padding-right: 0.5em; 
 
    position: absolute; 
 
    top: 31px; 
 
    transform: rotate(41deg); 
 
    animation: bounce 2s infinite; 
 
    -moz-animation:bounce 2s infinite; 
 
    -ms-animation:bounce 2s infinite; 
 
    -webkit-animation: bounce 2s infinite; 
 
    
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 
<div class="active ongoing"> 
 
</div>

Answer 1

這個動畫可能是基於animate.css這可能包括在您的網站的發展，你不包括或的jsfiddle

指定關鍵幀，這樣你就可以添加此到你的CSS和它將工作

@keyframes bounce { 
    from, 20%, 53%, 80%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    } 

    40%, 43% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -30px, 0); 
    transform: translate3d(0, -30px, 0); 
    } 

    70% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -15px, 0); 
    transform: translate3d(0, -15px, 0); 
    } 

    90% { 
    -webkit-transform: translate3d(0,-4px,0); 
    transform: translate3d(0,-4px,0); 
    } 
}