伪关键帧动画不起作用

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。并将完整的 url 图像放入 (http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg)

希望对您有所帮助..

Answer 2

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

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

"When writing CSS3 properties, the modern wisdom is to list the "real“属性最后，供应商前缀在前...”请参阅 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>

伪关键帧动画不起作用

Pseudo keyframe animation not working

wordpress

pseudo-class

keyframe

css-animations