[英]CSS animation works in chrome but not in firefox
CSS動畫可以完美地在chrome,edge和safari中使用,但不能在Firefox中使用。這是我的代碼
@-webkit-keyframes roll1 {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
#roll1:hover,
#roll1:focus {
-moz-animation-name: roll1;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease;
}
和我的HTML代碼。
<div id="roll">
<button type="button" name="next" id="roll1" class="btn btn-primary rollbutton" onclick="displayQuestion();">Roll Dice</button>
</div>
刪除所有-moz-行。 Firefox直接支持@keyframe動畫!
請查看此鏈接。
@-webkit-keyframes
特別適用於chrome,您應該只使用@keyframes
也不需要-moz
前綴mozilla支持原始transform
屬性
@keyframes roll1 { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } #roll1:hover, #roll1:focus { -moz-animation-name: roll1; -moz-animation-duration: 0.8s; -moz-transform-origin: 50% 50%; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease; }
<div id="roll"> <button type="button" name="next" id="roll1" class="btn btn-primary rollbutton" onclick="displayQuestion();">Roll Dice</button> </div>
這是因為您使用了僅支持Firefox瀏覽器的-moz-,所以我添加了用於chrom的-webkit-,就像可以將-o- -ms-用於所有瀏覽器支持一樣。
@-webkit-keyframes roll1 { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); -webkit-transform: translate(-1px, -2px) rotate(-1deg); transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); -webkit-transform: translate(-3px, 0px) rotate(1deg); transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); -webkit-transform: translate(0px, 2px) rotate(0deg); transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); -webkit-transform: translate(1px, -1px) rotate(1deg); transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); -webkit-transform: translate(-1px, 2px) rotate(-1deg); transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); -webkit-transform: translate(-3px, 1px) rotate(0deg); transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); -webkit-transform: translate(2px, 1px) rotate(-1deg); transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); -webkit-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); -webkit-transform: translate(2px, 2px) rotate(0deg); transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); -webkit-transform: translate(1px, -2px) rotate(-1deg); transform: translate(1px, -2px) rotate(-1deg); } } #roll1:hover, #roll1:focus { -moz-animation-name: roll1; -moz-animation-duration: 0.8s; -moz-transform-origin:50% 50%; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease; -webkit-animation-name: roll1; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-name: roll1; animation-duration: 0.8s; transform-origin:50% 50%; animation-iteration-count: infinite; animation-timing-function: ease; }
<div id="roll"> <button type="button" name="next" id="roll1" class="btn btn-primary rollbutton" onclick="displayQuestion();">Roll Dice</button> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.