JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="wrapper">
    <div id="universum-planet1">
        <div id="planet1"> <a href="universe.html" id="enterLink">
            <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouseOver=	"this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouseOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" /></a> 
        </div>
    </div>
</div>

CSS

.wrapper{
    position:absolute;
    top:40%;
    left:50%;
    margin-left:-125px;
    margin-top:-65px;
    height:250px;
    width: 250px;
    
 
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
    
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
    
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}

#universum-planet1 {
    height:250px;
    width: 250px;
   
    z-index:1;
    border: 1px solid #989898;
    -webkit-border-radius: 225px;
    -moz-border-radius:225px;
    border-radius: 225px;
    -webkit-animation:spin 15s linear infinite;
    -moz-animation:spin 15s linear infinite;
    animation:spin 15s linear infinite;
    -moz-transform-origin:center center;
    -webkit-transform-origin:center center;
    transform-origin:center center;
}
#planet1 {
    position:absolute;
    top:5%;
    left:5%;
    height: 50px;
    width: 50px;
    z-index:2;
    -webkit-animation:spin 30s linear infinite;
    -moz-animation:spin 30s linear infinite;
    animation:spin 30s linear infinite;
    -moz-transform-origin:center center;
    -webkit-transform-origin:center center;
    transform-origin:center center;
}
.wrapper:hover{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}