CSS3反彈關鍵幀不起作用

-1

我目前正在嘗試爲向下箭頭創建反彈動畫。但是，無論我如何更改值，我都可以使動畫正常工作，但關鍵幀未被識別。箭頭是一個字體很棒的fa-chevron-down。我的網站正在用wordpress構建。CSS3反彈關鍵幀不起作用

我的CSS代碼是：

.view-more > i{ 
    font-size: 39px; 
    position: absolute; 
    bottom: 2%; 
    animation: bounce 2s infinite; 
    -webkit-animation: bounce 2s infinite; 
    -moz-animation: bounce 2s infinite; 
} 
@keyframes bounce{ 
    0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0); 
    } 
    40% { 
    transform: translateY(-10px); 
    } 
    60% { 
    transform: translateY(-3px); 
    } 
} 
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-10px); 
    } 
    60% { 
    -webkit-transform: translateY(-3px); 
    } 
} 
@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-10px); 
    } 
    60% { 
    -moz-transform: translateY(-3px); 
    } 
}

上午我做錯了什麼，因爲我用Google搜索，從我發現這應該工作。

我也試過jsfiddle和關鍵幀正在工作。所以我很困惑。 https://jsfiddle.net/yewtree/qh3v7fdk/

任何幫助將不勝感激。感謝您花時間閱讀我的問題。

來源

2015-07-21 Mat Teague

我從來沒有見過關鍵幀語法下令像前。複製它們並將它們按順序工作？（如：「0,20,40,50,60,80,100」而不是「0,20,50,80,100,40,60」） – somethinghere

您的代碼適用於我。不過，我已經改變了animation財產的順序首先包括供應商的前綴（這是首選）：

.view-more > i { 
 
    font-size: 39px; 
 
    position: absolute; 
 
    bottom: 2%; 
 
    -webkit-animation: bounce 2s infinite; 
 
    -moz-animation: bounce 2s infinite; 
 
      animation: bounce 2s infinite; 
 
} 
 
@keyframes bounce{ 
 
    0%, 20%, 50%, 80%, 100% { 
 
    transform: translateY(0); 
 
    } 
 
    40% { 
 
    transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    transform: translateY(-3px); 
 
    } 
 
} 
 
@-webkit-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
    40% { 
 
    -webkit-transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    -webkit-transform: translateY(-3px); 
 
    } 
 
} 
 
@-moz-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -moz-transform: translateY(0); 
 
    } 
 
    40% { 
 
    -moz-transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    -moz-transform: translateY(-3px); 
 
    } 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="view-more"> 
 
    <i class="fa fa-chevron-down"></i> 
 
    </div> 
 
</body> 
 
</html>

來源

2015-07-21 13:57:15 rnevius

我看不出你有什麼問題，請參見下面的代碼片段。我已經修改了一下，使所有的值都相互依賴（並且通常使它更清晰），並且還增加了一些微不足道的值，因此我們可以看到差異。您的動畫按預期工作。

@keyframes bounce{ 
 
    0% { transform: translateY(0); } 
 
    20% { transform: translateY(0); } 
 
    40% { transform: translateY(-50%); } 
 
    50% { transform: translateY(0); } 
 
    60% { transform: translateY(-20%); } 
 
    80% { transform: translateY(0); } 
 
    100% { transform: translateY(0); } 
 
} 
 
@-webkit-keyframes bounce { 
 
    0% { -webkit-transform: translateY(0); } 
 
    20% { -webkit-transform: translateY(0); } 
 
    40% { -webkit-transform: translateY(-50%); } 
 
    50% { -webkit-transform: translateY(0); } 
 
    60% { -webkit-transform: translateY(-20%); } 
 
    80% { -webkit-transform: translateY(0); } 
 
    100% { -webkit-transform: translateY(0); } 
 
} 
 
@-moz-keyframes bounce { 
 
    0% { -moz-transform: translateY(0); } 
 
    20% { -moz-transform: translateY(0); } 
 
    40% { -moz-transform: translateY(-50%); } 
 
    50% { -moz-transform: translateY(0); } 
 
    60% { -moz-transform: translateY(-20%); } 
 
    80% { -moz-transform: translateY(0); } 
 
    100% { -moz-transform: translateY(0); } 
 
} 
 
div { 
 
    background:red; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 20px; 
 
    height: 20px; 
 
    -webkit-animation: 1000ms bounce infinite; 
 
    animation: 1000ms bounce infinite; 
 
}

<div></div>

來源

2015-07-21 14:03:54 somethinghere

CSS3反彈關鍵幀不起作用

回答

相關問題