簡單的CSS3動畫在Firefox中不起作用
[英]Simple CSS3 animation is not working in Firefox
問題描述
我正在嘗試對div進行動畫處理。 我實際上在動畫中所做的就是將div轉換為100％。 但是該動畫只能在chrome中使用，而不能在Firefox中使用。 我嘗試添加前綴，並且我還包括prefix-free.js插件。 Caniuse.com說，Firefox將支持無前綴的動畫。 我在堆棧中看到了很多類似的問題。 但大多數使用的是Firefox和其他版本尚不支持的屬性。 但是我的很簡單。 我什至嘗試過刪除翻譯和背景顏色更改。 但它也不起作用。
HTML：
<div class="container">
<div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>
CSS：
.container {
padding:3em;
}
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0 infinite normal both;
}
@keyframes test {
0% {
transform: translateX(50%);
background-color: red;
}
100% {
transform: translateX(0%);
background-color: yellowgreen;
}
}
3 個解決方案
解決方案1
0 2014-08-08 07:54:35
將動畫調用更改為此，
.icon
{
animation: test 1s linear infinite;
}
Firefox似乎不了解某些短手屬性。
解決方案2
0 已采納 2014-08-08 07:58:39
您的語法無效。 您的零animation-delay需要有一個單位，因此應為0s而不是0 ：
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0s infinite normal both;
}
無單位零僅允許長度，而不是時間。 請參閱此答案以獲取解釋（問題與過渡有關，但也適用於動畫）。
解決方案3
-3 2014-08-08 07:56:30
這樣寫你的代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
padding:3em;
}
.icon, .icon:hover {
width: 100px;
height: 100px;
background: red;
-webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */
animation:test 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes test {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
</div>
</body>
</html>
CSS3動畫無法在Firefox上運行，但可以在chrome上運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.