伪关键帧动画不起作用

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

@Rajkumar Gour 的答案是正确且有效的，但原始代码在最新的 Firefox 中也适用于我！

我认为由于供应商前缀的顺序错误，您可能会在特定浏览器版本中遇到一些问题，我已经根据@Rajkumar Gours 的回答在以下 sn-p 中更正了该问题，但如前所述，原始代码应该工作也...

“在编写 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>

Answer 2

.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);}
}

请仔细检查图片的网址。并输入图片的完整网址，例如 (http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg)

希望对你有所帮助..