의사 키 프레임 애니메이션이 작동하지 않습니다.

Question

저는 키 프레임을 처음 사용하고 워드 프레스의 의사 요소에서 애니메이션을 실행하려고합니다. 왜 작동하지 않는 나는 운동을 할 수 없다.

나는 비슷한 질문과 포럼을 읽었지만 아무 소용이 없습니다.

저는 결국 실제로는 왼쪽과 오른쪽으로 움직이기를 원하지만 테스트를 위해 스핀 키 프레임을 잡았습니다.

내가 시도하는 코드는 다음과 같습니다 나는 그 문제이었다 어쩌면 생각과 의사 클래스하지 않았다조차 시도 요소를 포함하여 다양한 다른 객체에 적용 시도로 초기 변환을 제거하려고

.dots::after { 
    content: url("/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg"); 
    display: inline-block; 
    width: 150px; 
    transform: translateY(32px); 
    margin-right: 80px; 
    animation: spin .5s infinite linear; 
    -moz-animation: spin .5s infinite linear;  
    -webkit-animation: spin .5s infinite linear; 
    -o-animation: spin .5s infinite linear;  
    -ms-animation: spin .5s infinite linear;  
    -moz-animation:spin .5s infinite linear; 
} 

@-moz-keyframes spin { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(360deg); } 
} 

@-webkit-keyframes spin { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(360deg); } 
} 

@-o-keyframes spin { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(360deg); } 
} 

@-ms-keyframes spin { 
    0% { -moz-transform:rotate(0deg); } 
    100% { -moz-transform:rotate(360deg); } 
} 

그것은 다른 웹 사이트에 있지만 작동하지 않습니다.

도움을 주시면 감사하겠습니다.

감사

Answer 1

.dots{ 
    display: inline-block; 
    animation-name: rotating; 
    animation-duration: 1000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 

    -webkit-animation-name: rotating; 
    -webkit-animation-duration: 1000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

    -moz-animation-name: rotating; 
    -moz-animation-duration: 1000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 

    -ms-animation-name: rotating; 
    -ms-animation-duration: 1000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 
.dots::after { 
    content: ""; 
    background-image: url("/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg"); 
    width: 100px; 
    height:100px; 
    display: inline-block; 
    background-size:contain; 
    background-repeat:no-repeat; 
} 
@keyframes rotating { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
} 
@-ms-keyframes rotating { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
} 
@-moz-keyframes rotating { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
} 
@-webkit-keyframes rotating { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
} 

이미지의 URL를 다시 한 번 확인하시기 바랍니다. 및 (http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg)

이 당신을 도울 것입니다 희망 같은 이미지의 전체 URL ..

Answer 2

@Rajkumar Gour의 대답은 정확하고 작품이지만, 원래의 코드가 너무 최신 파이어 폭스에서 나를 위해 일했다을 넣어!

벤더 프리픽스의 순서가 잘못되어 특정 브라우저 버전에서 문제가 발생할 수 있다고 생각합니다. @Rajkumar Gours 대답을 기반으로 다음 스 니펫에서이 문제를 해결했지만 원본 코드가 작동해야합니다. 너무 ...

"CSS3 속성을 쓸 때 현대의 지혜는"진짜 "속성과 마지막으로 공급 업체 접두사를 나열하는 것입니다."자세한 내용은 css-tricks.com/ordering-css3-properties을 참조하십시오!

.dots{ 
 
    display: inline-block; 
 

 
    -webkit-animation-name: rotating; 
 
    -webkit-animation-duration: 1000ms; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 

 
    -moz-animation-name: rotating; 
 
    -moz-animation-duration: 1000ms; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: linear; 
 

 
    -ms-animation-name: rotating; 
 
    -ms-animation-duration: 1000ms; 
 
    -ms-animation-iteration-count: infinite; 
 
    -ms-animation-timing-function: linear; 
 

 
    animation-name: rotating; 
 
    animation-duration: 1000ms; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 
.dots::after { 
 
    content: ""; 
 
    background-image: url("http://via.placeholder.com/140x100"); 
 
    width: 100px; 
 
    height:100px; 
 
    display: inline-block; 
 
    background-size:contain; 
 
    background-repeat:no-repeat; 
 
} 
 
@-ms-keyframes rotating { 
 
    0% {transform: rotate(0deg);} 
 
    100% {transform: rotate(360deg);} 
 
} 
 
@-moz-keyframes rotating { 
 
    0% {transform: rotate(0deg);} 
 
    100% {transform: rotate(360deg);} 
 
} 
 
@-webkit-keyframes rotating { 
 
    0% {transform: rotate(0deg);} 
 
    100% {transform: rotate(360deg);} 
 
} 
 
@keyframes rotating { 
 
    0% {transform: rotate(0deg);} 
 
    100% {transform: rotate(360deg);} 
 
}

<div class="dots"></div>