CSS3關鍵幀動畫無法在Firefox和IE中工作

我的CSS代碼在Chrome和Safari瀏覽器中運行，但不在Firefox，IE和Opera上運行。當我創建@keyframes旋轉{}，對於其他瀏覽器，這不是工作是，這4行： animation-duration: 4s;
animation-timing-function: linear; animation-name:"rotate"; animation-iteration-count: infinite; 或關鍵幀的方法？我該如何解決這個問題？CSS3關鍵幀動畫無法在Firefox和IE中工作

CSS：

@-webkit-keyframes rotate { 
0% { 
    -webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); 
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
} 

    13% { 
    -webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); 
    } 
    25% { 
    -webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); 
    } 
    38% { 
    -webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); 
    } 
    50% { 
    -webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); 
    } 
    63% { 
    -webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); 
    } 
    75% { 
    -webkit-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); 
    } 
    88% { 
    -webkit-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); 
    } 
    100% { 
    -webkit-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); 
    } 
} 
/************** F I R E F O X ***********************/ 
@-moz-keyframes rotate { 
0% { 
    -moz-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); 
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
} 

    13% { 
    -moz-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); 
    } 
    25% { 
    -moz-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); 
    } 
    38% { 
    -moz-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); 
    } 
    50% { 
    -moz-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); 
    } 
    63% { 
    -moz-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); 
    } 
    75% { 
    -moz-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); 
    } 
    88% { 
    -moz-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); 
    } 
    100% { 
    -moz-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); 
    } 
} 
/************************************/ 
@keyframes rotate { 
    0% { 
    transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px)  rotate(0deg); 
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    } 

    13% { 
    transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); 
    } 
    25% { 
    transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); 
    } 
    38% { 
    transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); 
    } 
    50% { 
    transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); 
    } 
    63% { 
    transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); 
    } 
    75% { 
    transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); 
    } 
    88% { 
    transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); 
    } 
     100% { 
    transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); 
     } 
     } 
    /************** I E ***********************/ 
@-ms-keyframes rotate { 
    0% { 
    -ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); 
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    } 

    13% { 
    -ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); 
    } 
    25% { 
    -ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); 
    } 
    38% { 
    -ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); 
    } 
    50% { 
    -ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); 
    } 
    63% { 
    -ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); 
    } 
    75% { 
    -ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); 
    } 
    88% { 
    -ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); 
    } 
    100% { 
    -ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); 
    } 
} 
/************************************/ 
@-o-keyframes rotate { 
0% { 
    -o-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg); 
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    } 

    13% { 
    -o-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg); 
    } 
    25% { 
    -o-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg); 
    } 
    38% { 
    -o-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg); 
    } 
    50% { 
    -o-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg); 
    } 
    63% { 
    -o-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg); 
    } 
    75% { 
    -o-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg); 
    } 
    88% { 
    -o-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg); 
    } 
    100% { 
    -o-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg); 
} 
} 

/*************************************/ 
#circle { 
height: 10px; 
width: 10px; 
border-radius:25px; 
background-color:#2187e7; 
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 

-webkit-animation-duration: 4s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name:"rotate"; 
-webkit-animation-iteration-count: infinite; 

animation-duration: 4s; 
animation-timing-function: linear; 
animation-name:"rotate"; 
animation-iteration-count: infinite; 

-moz-animation-duration: 4s; 
-moz-animation-timing-function: linear; 
-moz-animation-name:"rotate"; 
-moz-animation-iteration-count: infinite; 

-ms-animation-duration: 4s; 
-ms-animation-timing-function: linear; 
-ms-animation-name:"rotate"; 
-ms-animation-iteration-count: infinite; 

-o-animation-duration: 4s; 
-o-animation-timing-function: linear; 
-o-animation-name:"rotate"; 
-o-animation-iteration-count: infinite; 

position:absolute; 
left:-1%; 
top:-1%; 
}

來源

2013-12-19 Metta

不要在-webkit-keyframes中設置所有這些。設置帶有前綴屬性的前綴關鍵幀以及具有前綴屬性的關鍵幀 – vals

我編輯我的代碼，請檢查，並且它僅適用於Chrome而不是其他瀏覽器 – Metta

取下動畫名稱（rotate而不是"rotate"）雙引號。

然後它會工作：

Running demo

-webkit-animation-duration: 4s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name:rotate; 
-webkit-animation-iteration-count: infinite; 

-moz-animation-duration: 4s; 
-moz-animation-timing-function: linear; 
-moz-animation-name:rotate; 
-moz-animation-iteration-count: infinite; 

-ms-animation-duration: 4s; 
-ms-animation-timing-function: linear; 
-ms-animation-name:rotate; 
-ms-animation-iteration-count: infinite; 

-o-animation-duration: 4s; 
-o-animation-timing-function: linear; 
-o-animation-name:rotate; 
-o-animation-iteration-count: infinite; 

animation-duration: 4s; 
animation-timing-function: linear; 
animation-name:rotate; 
animation-iteration-count: infinite;

記住，不帶前綴的屬性必須始終是最後一次，具體的供應商之後。 P：如果您不知道，有些網站在編譯時（如Prefixr）或甚至在運行時（如prefix-free）在編譯時加上前綴。

Btw +1，你的動畫很漂亮:)

來源

2013-12-19 11:23:46

非常感謝:) – Metta

https://jsfiddle.net/x5x1ax4n/由於某些原因，我的IE在IE中不起作用。你能幫忙嗎？我也喜歡動畫。 +1。 – Si8

哪個IE版本？ –

CSS3關鍵幀動畫無法在Firefox和IE中工作

回答

相關問題