How do I make an image spin under another image? - html

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