How do I make an image spin under another image?

Question

I have two images and I've found css ::after keeps one image on top of the other quite nicely, even when the screen size changes. The thing is I want the image underneath to spin and the image on top to remain stationary. I can't seem to do this and I'm not even sure this is possible using ::after. Is there a way to do it?

Here's my code:

    .box {
      display: inline-block;
      position: fixed;
      top: 50%; 
      left: 30%;
        -webkit-animation-name: spinnerRotate;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: spinnerRotate;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: spinnerRotate;
        -ms-animation-duration: 5s;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
    }

   .box:after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        top: 25px;
        right: 0;
        bottom: 0;
        left: 25px;
        background: url("../Content/images/top.png");
    }   

<div class="box">
    <img src="../Content/images/bottom.png">
</div>

Here's the animation:

 @-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(720deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(720deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(720deg);}
}

Answer 1

Well, you can do it like this:

  @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .box::after { animation: rotate 5s infinite; content:url("http://lorempixel.com/sports/400/200/"); } 

 <div class="box"> <img src="http://lorempixel.com/g/400/200/"> </div> 

I changed your background-image with using the content property. This is not necessary but more comfortable, as you don't need to give the image dimensions.

• Here is a nice article about css animations: https://css-tricks.com/almanac/properties/a/animation/
• Here is information about compatibility: http://caniuse.com/#search=animation