Pseudo keyframe animation not working

Question

I am new to keyframes and am trying to get an animation to run on a pseudo element in wordpress. I cannot work out why it is not working.

I have read through similar questions and forums but to no avail.

I am actually eventually wanting it to move left and right but I just grabbed some spin keyframes to test it.

The code I have tried is:

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

I tried removing the initial transform as I thought maybe that was the issue and tried applying it to various other objects including elements that were not pseudo classes and even tried it on another website but it just doesn't work.

Any help would be much appreciated.

Thanks

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

please double check the url of image. and put the complete url of image like (http://example.com/wp-content/uploads/2017/07/pub-crawl-edinburgh-hand-01.svg)

Hope this will help you..