疑似キーフレームアニメーションが機能しない

Question

私はキーフレームが初めてで、wordpressの疑似要素でアニメーションを実行しようとしています。私はそれが働いていない理由を解決できません。

私は似たような質問やフォーラムを読んだことがあるが、役に立たない。

私は実際には左右に動こうと思っていますが、テストするためにスピンキーフレームをつかみました。

私がしようとしたコードは次のとおりです。私はそれが問題だったかもしれないと思ったし、疑似クラスはなかったとさえしようとした要素を含む様々な他のオブジェクトに適用しようとしたとして、最初の変換を削除しようとした

.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をダブルチェックしてください。そして

Answer 2

に...これはあなたを助ける画像

（ http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg）のような希望の完全なURLを入れ@Rajkumar Gourの答えが正しいと動作しますが、元のコードは、あまりにも、最新のFirefoxで私のための仕事をしてくれました！

ベンダープレフィックスの順序が間違っているため、特定のブラウザーのバージョンに問題が発生する可能性があります。@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>