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

我尝试删除初始转换，因为我认为这可能是问题，并尝试将其应用于各种其他对象，包括非伪类的元素，甚至在其他网站上尝试过，但它只是不起作用。 / p>

非常感谢任何帮助。

由于

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

请仔细检查图片的网址。并将完整的图片网址设为（http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg）

希望这会对你有帮助..

Answer 2

@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>

伪关键帧动画无法正常工作

2 个答案: