wordpress - 伪关键帧动画不起作用

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。并输入图像的完整网址，例如 ( http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg )

希望这对你有帮助..