Skillsbattle |School for Learning

<!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
 <title>Skillsbattle | Rotate Continue with Pure CSS Animation</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
 </head>
 <body>

<h1>Image Rotate Continue with Pure CSS Animation Without Javascript</h1>
 <div class="induse-sec-lft">
   <div class="globe-img">
     <img class="image" src="images/global-it.png" id="loading" alt="Skillsbattle">
     <div class="globe-info">
       <p>Building Technology-Driven World</p>
       <h2>360<sup>0</sup></h2>
       <p><span>Industries</span></p>
     </div>
   </div>
 </div>
 <style media="screen">
 .induse-sec-lft .globe-info, .induse-sec-lft .globe-info-img {
 background: url(./images/globe-info-back.png) center center no-repeat;
 border-radius: 50%;
 position: absolute;
 top: 22%;
 left: 22%;
 z-index: 111;
 width: 350px;
 height: 350px;
 padding: 70px 50px;
 text-align: center;
 }
 .induse-sec-lft .globe-img {
 width: 700px;
 height: 700px;
 margin: 0 auto;
 position: relative;
 }
 .induse-sec-lft {
 position: relative;
 z-index: 3;
width: 100%;
overflow: hidden;
text-align: center;
 }
 .induse-sec-lft .globe-info h2 {
 font-weight: 400;
 font-size: 100px;
 color: #fff;
 }
 .globe-info-img, .image {
 position: absolute;
 top: 0;
 left: 0;
 width: 650px;
 height: 650px;
 background-size: 100%;
 margin: 0;
 -webkit-animation: spin 30s linear infinite;
 -moz-animation: spin 30s linear infinite;
 animation: spin 30s linear infinite;
 }

.induse-sec-lft .globe-info p {
 font-size: 18px;
 line-height: 24px;
 color: #fff;
 font-weight: 400;
 margin: 0;
 padding: 0;
 }
 h1.text_position {
 text-align: center;
 padding: 20px 0 0 0;
 }
 #loading {
 -webkit-animation: rotation 18s infinite linear;
 }

@-webkit-keyframes rotation {
 from {
 -webkit-transform: rotate(0deg);
 }
 to {
 -webkit-transform: rotate(359deg);
 }
 }
 </style>
 </body>
 </html>