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

내 코드를 편집하고 확인하십시오. 다른 브라우저에서는 크롬이 작동하지 않습니다. – 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.S : 모름이있는 경우 컴파일시 (예 : Prefixr) 또는 런타임 (예 : prefix-free)에 접두사가 붙는 사이트가 있습니다.

Btw +1, 애니메이션이 예쁘다. :)

출처

2013-12-19 11:23:46

고마워요. – Metta

https://jsfiddle.net/x5x1ax4n/ 내 이유는 IE에서 작동하지 않습니다. 좀 도와 줄 수있어? 나는 또한 애니메이션을 좋아한다. +1. – Si8

어떤 IE 버전입니까? –

CSS3 키 프레임 애니메이션이 Firefox 및 IE에서 작동하지 않습니다.

답변

관련 문제