"animation icon"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pieter-biesemans/pen/xqVBdK" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style class="cp-pen-styles">div { position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0.1vw solid #a78247; overflow: hidden; } div:before, div:after { content: ''; display: block; position: absolute; } body { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: #303030; overflow-x: hidden; } .wrapper { position: absolute; top: 50%; left: 50%; width: 78vw; height: 70vh; border: 0; transform: translate(-50%, -50%); overflow: visible; } .wrapper .icon { position: relative; display: inline-block; width: 12vw; height: 12vw; margin: 2.5vw 1.5vw; border: 0; overflow: visible; } .wrapper .icon .moon, .wrapper .icon .planetoid, .wrapper .icon .planet { border-radius: 50%; background: #303030; } .wrapper .icon.icon1 .moon.top { top: 10%; right: 5%; width: 12%; height: 12%; animation: icon1moontop 5s ease 0s infinite; } .wrapper .icon.icon1 .moon.bottom { top: 75%; left: 15%; width: 8%; height: 8%; animation: icon1moonbottom 5s ease 0s infinite; } .wrapper .icon.icon1 .planet { top: 20%; left: 20%; width: 62%; height: 62%; } .wrapper .icon.icon1 .planet .line { height: 0.1vw; border-color: #a78247 transparent transparent transparent; overflow: visible; } .wrapper .icon.icon1 .planet .line.line1 { top: 15%; left: 0; width: 60%; } .wrapper .icon.icon1 .planet .line.line2 { top: 30%; left: 0; width: 20%; } .wrapper .icon.icon1 .planet .line.line2:after { top: -0.1vw; left: 140%; height: 0.1vw; width: 60%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon1 .planet .line.line3 { top: 38%; right: 0; width: 40%; } .wrapper .icon.icon1 .planet .line.line4 { top: 48%; right: 0; width: 18%; } .wrapper .icon.icon1 .planet .line.line5 { top: 57%; left: 0; width: 30%; } .wrapper .icon.icon1 .planet .line.line5:after { top: -0.1vw; left: 140%; height: 0.1vw; width: 40%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon1 .planet .line.line6 { top: 68%; left: 0; width: 70%; } .wrapper .icon.icon1 .planet .line.line7 { top: 80%; right: 0; width: 30%; } .wrapper .icon.icon1 .planet .line.line7:after { top: -0.1vw; left: -80%; height: 0.1vw; width: 40%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon2 .planetoid { top: 15%; right: 9%; width: 10%; height: 10%; overflow: visible; animation: icon2planetoid 5s linear 1s infinite; } .wrapper .icon.icon2 .planetoid:after { top: -35%; left: -35%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon2 .planet { top: 20%; left: 17%; width: 63%; height: 63%; } .wrapper .icon.icon2 .planet:after { top: 10%; left: 10%; width: 70%; height: 70%; border: 0.1vw solid #a78247; border-radius: 50%; border-color: #a78247 transparent transparent transparent; transform: rotate(-50deg); } .wrapper .icon.icon2 .ring { top: 40%; left: 10%; width: 77.5%; height: 25%; border-radius: 50%; border-color: transparent #a78247 #a78247 #a78247; transform: rotate(-17deg); animation: icon2ring 5s linear 0s alternate infinite; } .wrapper .icon.icon3 .top { top: -10%; left: 5%; width: 66%; height: 66%; transform: rotate(-30deg); border-color: transparent transparent #a78247 transparent; } .wrapper .icon.icon3 .top .visor { top: 44%; left: 3%; width: 88%; height: 88%; border-radius: 50%; } .wrapper .icon.icon3 .top .visor:after { top: 10%; left: 10%; width: 70%; height: 70%; border: 0.1vw solid #a78247; border-radius: 50%; border-color: #a78247 transparent transparent transparent; transform: rotate(-50deg); } .wrapper .icon.icon3 .top .hood { top: 35%; left: 50%; width: 70%; height: 70%; border-color: transparent transparent transparent #a78247; transform-origin: left bottom; animation: icon3hood 5s linear 0s alternate infinite; } .wrapper .icon.icon3 .top .hood:after { top: 0; left: -82%; width: 150%; padding-top: 150%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon3 .middle { top: 42%; left: 47.5%; width: 15%; height: 15%; border-radius: 50%; background: #303030; overflow: visible; transform: rotate(-30deg); animation: icon3middle 15s linear 0s infinite; } .wrapper .icon.icon3 .middle:before { top: 37%; left: -55%; width: 40%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon3 .bottom { top: 52%; left: 30%; width: 66%; height: 25%; border-color: #a78247 transparent transparent transparent; transform: rotate(-30deg); } .wrapper .icon.icon3 .bottom .neck { top: -100%; left: 0; width: 95%; height: 150%; transform: rotate(12deg); border-color: transparent transparent #a78247 transparent; } .wrapper .icon.icon3 .bottom .neck:after { top: -37%; left: 0; width: 95%; padding-top: 100%; border-radius: 50%; border: 0.1vw solid #a78247; } .wrapper .icon.icon3 .bottom .line { top: 60%; left: 0; width: 85%; height: 1%; transform: rotate(12.5deg); border-color: transparent transparent #a78247 transparent; } .wrapper .icon.icon4 .planetoid.top { top: 10%; left: 12%; width: 8%; height: 8%; overflow: visible; transform-origin: -50% -50%; animation: icon4planet 5s linear 0s infinite; } .wrapper .icon.icon4 .planetoid.top:after { top: 83%; left: -48%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon4 .planetoid.middle { top: 35%; left: 54%; width: 15%; height: 15%; overflow: visible; transform-origin: -50% 100%; animation: icon4planet 10s ease-out 0s infinite; } .wrapper .icon.icon4 .planetoid.middle:before { top: -20%; left: -20%; width: 50%; padding-top: 50%; border: 0.1vw solid #a78247; border-radius: 50%; background: #303030; transform-origin: 50% 70%; animation: icon4planet 10s ease-out 0s infinite; } .wrapper .icon.icon4 .planetoid.bottom { top: 61%; left: 31%; width: 9%; height: 9%; overflow: visible; transform-origin: 150% -100%; animation: icon4planet 10s ease-out 0s infinite; } .wrapper .icon.icon4 .planetoid.bottom:after { top: -28%; left: 122%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; transform-origin: 500% 500%; animation: icon4planet 10s ease-out 0s infinite; } .wrapper .icon.icon4 .planet { top: 20%; left: 18%; width: 65%; height: 65%; overflow: visible; animation: icon4planet 5s linear 0s infinite; } .wrapper .icon.icon4 .planet:after { top: 75%; left: 75%; width: 20%; height: 20%; border: 0.1vw solid #a78247; border-radius: 50%; background: #303030; } .wrapper .icon.icon5 .planet { top: 15%; left: 25%; width: 62%; height: 62%; border-color: #a78247 #a78247 #a78247 transparent; transform: rotate(-47deg); overflow: visible; } .wrapper .icon.icon5 .planet:after { top: -25%; left: 50%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon5 .rocket { top: 0; left: 33%; width: 40%; height: 100%; border-color: transparent; transform: rotate(47deg); } .wrapper .icon.icon5 .rocket .body { top: 0; left: 15%; width: 70%; height: 90%; border-color: transparent; animation: icon5body 0.5s ease infinite; } .wrapper .icon.icon5 .rocket .body:before, .wrapper .icon.icon5 .rocket .body:after { top: -10%; width: 200%; height: 118%; border-radius: 50%; border: 0.1vw solid #a78247; } .wrapper .icon.icon5 .rocket .body:after { left: -110%; } .wrapper .icon.icon5 .rocket .thruster.left, .wrapper .icon.icon5 .rocket .thruster.right { top: 60%; left: 7.5%; width: 25%; height: 25%; border-color: transparent; } .wrapper .icon.icon5 .rocket .thruster.left:before, .wrapper .icon.icon5 .rocket .thruster.left:after, .wrapper .icon.icon5 .rocket .thruster.right:before, .wrapper .icon.icon5 .rocket .thruster.right:after { border-radius: 50%; border: 0.1vw solid #a78247; } .wrapper .icon.icon5 .rocket .thruster.left:before, .wrapper .icon.icon5 .rocket .thruster.right:before { top: -10%; width: 200%; height: 120%; } .wrapper .icon.icon5 .rocket .thruster.left:after, .wrapper .icon.icon5 .rocket .thruster.right:after { top: 60%; left: 30%; width: 132%; padding-top: 132%; } .wrapper .icon.icon5 .rocket .thruster.right { left: 64.5%; transform: rotatey(180deg); } .wrapper .icon.icon5 .rocket .thruster.mid { top: 60%; left: 23%; width: 51%; height: 12%; border-color: transparent; } .wrapper .icon.icon5 .rocket .thruster.mid:before { top: 0; left: 0; width: 90%; padding-top: 90%; border-radius: 50%; border: 0.1vw solid #a78247; border-color: #a78247 #a78247 transparent #a78247; } .wrapper .icon.icon5 .line { height: 1%; border-color: #a78247 transparent transparent transparent; transform: rotate(-45deg); transform-origin: top right; overflow: visible; } .wrapper .icon.icon5 .line:before { height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon5 .line.left { width: 24%; top: 60%; left: 4%; animation: icon5line1 0.5s ease infinite reverse; } .wrapper .icon.icon5 .line.left:before { top: -15%; left: -60%; width: 20%; } .wrapper .icon.icon5 .line.mid { width: 44%; top: 50%; left: 5.5%; animation: icon5line2 0.5s ease infinite; } .wrapper .icon.icon5 .line.mid:before { top: -105%; left: 110%; width: 10%; } .wrapper .icon.icon5 .line.right { width: 14%; top: 80%; left: 17%; animation: icon5line3 0.5s ease 1s infinite reverse; } .wrapper .icon.icon5 .line.right:before { width: 0; border-color: transparent; } .wrapper .icon.icon6 .moon.top { top: 15%; left: 10%; width: 8%; height: 8%; animation: icon6moontop 5s ease 0s infinite; } .wrapper .icon.icon6 .moon.bottom { top: 85%; right: 5%; width: 1%; height: 1%; animation: icon6moonbottom 5s ease 0s infinite; } .wrapper .icon.icon6 .planet { top: 25%; left: 24%; width: 63%; height: 63%; } .wrapper .icon.icon6 .ring { top: 45%; left: 15%; width: 80%; height: 25%; border-radius: 50%; border-color: transparent #a78247 #a78247 #a78247; transform: rotate(17deg); animation: icon6ring 5s linear 0s infinite alternate; } .wrapper .icon.icon6 .ring.planet { top: 62.5%; left: 40%; width: 8%; height: 8%; border-color: #a78247; background: #303030; z-index: 1; overflow: visible; animation: icon6ringplanet 5s ease 0s infinite; } .wrapper .icon.icon6 .ring.planet:after { top: -55%; left: 80%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon6 .planetoid { top: 25%; left: 70%; width: 20%; height: 20%; overflow: visible; background: #303030; } .wrapper .icon.icon6 .planetoid:before { top: -25%; left: -25%; width: 150%; padding-top: 150%; border: 0.1vw solid #a78247; border-radius: 50%; border-color: #a78247 #a78247 transparent transparent; transform: rotate(55deg); background: transparent; } .wrapper .icon.icon6 .planetoid:after { top: 100%; left: 5%; width: 30%; padding-top: 15%; border: 0.1vw solid #a78247; border-radius: 50%; border-color: transparent transparent #a78247 transparent; transform: rotate(35deg); background: transparent; } .wrapper .icon.icon7 .telescope { top: 15%; left: 10%; width: 75%; height: 33%; transform: rotate(-17deg); border-color: transparent; animation: icon7telescope 5s ease 0s infinite alternate; } .wrapper .icon.icon7 .telescope:before, .wrapper .icon.icon7 .telescope:after { height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon7 .telescope:before { width: 25%; left: 60%; } .wrapper .icon.icon7 .telescope:after { bottom: 15%; width: 15%; left: 65%; } .wrapper .icon.icon7 .telescope .body { top: 20%; left: 10%; width: 75%; height: 45%; overflow: visible; } .wrapper .icon.icon7 .telescope .body .line { border-color: #a78247 transparent transparent transparent; transform: rotate(90deg); } .wrapper .icon.icon7 .telescope .body .line.line1 { top: 45%; left: -5%; width: 40%; } .wrapper .icon.icon7 .telescope .body .line.line2 { top: 45%; left: 20%; width: 28%; } .wrapper .icon.icon7 .telescope .body .line.line3 { top: 45%; left: 45%; width: 28%; } .wrapper .icon.icon7 .telescope .body .line.line4 { top: 45%; left: 65%; width: 28%; } .wrapper .icon.icon7 .telescope .lens { top: 10%; right: 0; width: 16%; height: 62%; } .wrapper .icon.icon7 .tripod { top: 35%; left: 30%; width: 45%; height: 45%; border-color: transparent; } .wrapper .icon.icon7 .tripod .anchor { left: 40%; width: 20%; height: 20%; border-radius: 50%; } .wrapper .icon.icon7 .tripod .foot { top: 20%; left: 50%; height: 1%; border-color: #a78247 transparent transparent transparent; transform-origin: top left; } .wrapper .icon.icon7 .tripod .foot.left { width: 92%; transform: rotate(115deg); } .wrapper .icon.icon7 .tripod .foot.mid { width: 84%; transform: rotate(90deg); } .wrapper .icon.icon7 .tripod .foot.right { width: 92%; transform: rotate(65deg); } .wrapper .icon.icon7 .ground { top: 80%; left: 30%; width: 45%; height: 1%; border-color: #a78247 transparent transparent transparent; overflow: visible; } .wrapper .icon.icon7 .ground:after { top: -10%; left: 115%; width: 8%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon8 .moon.top { top: 15%; left: 10%; width: 8%; height: 8%; overflow: visible; animation: icon8moontop 2.5s linear 0s infinite; } .wrapper .icon.icon8 .moon.top:before { top: 120%; left: -30%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon8 .moon.bottom { top: 85%; right: 5%; width: 1%; height: 1%; animation: icon8moonbottom 5s ease 0s infinite; } .wrapper .icon.icon8 .planet { top: 25%; left: 24%; width: 63%; height: 63%; } .wrapper .icon.icon8 .ring { top: 45%; left: 15%; width: 80%; height: 25%; border-radius: 50%; border-color: transparent #a78247 #a78247 #a78247; transform: rotate(17deg); overflow: visible; animation: icon8ring 5s ease 0s infinite alternate; } .wrapper .icon.icon8 .ring:after { top: 80%; left: 22%; width: 10%; padding-top: 10%; border: 0.1vw solid #a78247; border-color: #a78247 #a78247 transparent transparent; transform: rotate(45deg); } .wrapper .icon.icon8 .planetoid { top: 25%; left: 70%; width: 20%; height: 20%; overflow: visible; background: #303030; animation: icon8planetoid 5s linear 0s infinite reverse; } .wrapper .icon.icon8 .planetoid:before { top: -25%; left: -25%; width: 150%; padding-top: 150%; border: 0.1vw solid #a78247; border-radius: 50%; border-color: #a78247 #a78247 transparent transparent; transform: rotate(55deg); background: transparent; } .wrapper .icon.icon8 .planetoid:after { top: -40%; left: 50%; width: 20%; padding-top: 20%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent #a78247; transform: rotate(-35deg); background: transparent; } .wrapper .icon.icon9 .planetoid { top: 15%; left: 27%; width: 10%; height: 10%; overflow: visible; animation: icon9planetoid 5s linear 0s infinite; } .wrapper .icon.icon9 .planetoid:before { top: -50%; left: 200%; width: 1%; padding-top: 1%; border: 0.1vw solid #a78247; border-radius: 50%; transform-origin: -450% -200%; animation: icon9planetoid 5s ease 0s infinite reverse; } .wrapper .icon.icon9 .planetoid:after { top: -20%; left: 300%; width: 15%; padding-top: 15%; border: 0.1vw solid #a78247; border-radius: 50%; transform-origin: 150% 50%; animation: icon9planetoid 5s ease 2.5s infinite; } .wrapper .icon.icon9 .flag { top: 30%; left: 40%; width: 40%; height: 25%; background: #303030; } .wrapper .icon.icon9 .flag .square { top: -0.1vw; left: -0.1vw; width: 45%; height: calc(50% + 2*0.1vw); } .wrapper .icon.icon9 .flag .line { height: 1%; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon9 .flag .line.line1 { top: 25%; left: 40%; width: 60%; } .wrapper .icon.icon9 .flag .line.line2 { top: 50%; left: 40%; width: 60%; } .wrapper .icon.icon9 .flag .line.line3 { top: 75%; left: 0; width: 100%; } .wrapper .icon.icon9 .pole { top: 54%; left: 40%; width: 1%; height: 30%; border-color: transparent transparent transparent #a78247; } .wrapper .icon.icon9 .ground { top: 84%; left: 33%; width: 46%; height: 1%; border-color: #a78247 transparent transparent transparent; overflow: visible; } .wrapper .icon.icon9 .ground:before { top: -0.1vw; left: -25%; height: 10%; width: 10%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon9 .ground:after { top: -0.5vw; left: 65%; width: 0.8vw; padding-top: 0.8vw; border: 0.1vw solid #a78247; border-radius: 50%; border-color: #a78247 #a78247 transparent transparent; transform: rotate(-45deg); } .wrapper .icon.icon10 .orbit, .wrapper .icon.icon10 .planet { border-radius: 50%; } .wrapper .icon.icon10 .orbit { border-color: #a78247 #a78247 #a78247 transparent; overflow: visible; } .wrapper .icon.icon10 .orbit:before { top: -7.5%; left: 30%; width: 15%; height: 15%; border: 0.1vw solid #a78247; border-radius: 50%; background: #303030; } .wrapper .icon.icon10 .orbit.orbit1 { top: 17.5%; left: 17.5%; width: 65%; height: 65%; transform: rotate(150deg); animation: icon10orbit 5s ease 0s infinite; } .wrapper .icon.icon10 .orbit.orbit2 { top: 30%; left: 30%; width: 40%; height: 40%; transform: rotate(50deg); animation: icon10orbit 5s ease 0s infinite reverse; } .wrapper .icon.icon10 .planet { top: 42.5%; left: 42.5%; width: 15%; height: 15%; animation: icon10planet 5s ease 0s infinite alternate; } .wrapper .icon.icon11 .planet { top: 17.5%; left: 17.5%; width: 65%; height: 65%; overflow: visible; animation: icon11planet 10s ease 0s infinite alternate; } .wrapper .icon.icon11 .planet:before { top: -10%; left: 73%; width: 25%; height: 25%; border: 0.1vw solid #a78247; border-radius: 50%; border-color: #a78247 #a78247 transparent #a78247; transform: rotate(40deg); } .wrapper .icon.icon11 .planet .line { height: 1%; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon11 .planet .line.line1 { top: 7%; right: 22%; width: 25%; } .wrapper .icon.icon11 .planet .line.line2 { top: 18%; left: 10%; width: 55%; } .wrapper .icon.icon11 .planet .line.line3 { top: 30%; left: 3%; width: 94%; } .wrapper .icon.icon11 .planet .line.line4 { top: 40%; right: 0; width: 35%; overflow: visible; } .wrapper .icon.icon11 .planet .line.line4:before { top: -0.1vw; left: -60%; width: 30%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon11 .planet .line.line5 { top: 50%; left: 0; width: 100%; } .wrapper .icon.icon11 .planet .line.line6 { top: 58%; left: 0; width: 28%; overflow: visible; } .wrapper .icon.icon11 .planet .line.line6:before { top: -0.1vw; left: 130%; width: 30%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon11 .planet .line.line7 { top: 68%; left: 3%; width: 58%; overflow: visible; } .wrapper .icon.icon11 .planet .line.line7:before { top: -0.1vw; left: 120%; width: 40%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon11 .planet .line.line7:after { margin-top: -15%; left: 100%; padding: 8%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon11 .planet .line.line8 { top: 80%; right: 10%; width: 25%; overflow: visible; } .wrapper .icon.icon11 .planet .line.line8:before { top: -0.1vw; left: -70%; width: 30%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon11 .planet .line.line9 { top: 93%; left: 25%; width: 25%; } .wrapper .icon.icon12 .planet { top: 25%; left: 10%; width: 65%; height: 65%; animation: icon12planet 0.5s linear infinite alternate; } .wrapper .icon.icon12 .planet:before { top: 17.5%; left: 17.5%; width: 65%; height: 65%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon12 .line { height: 1%; border-color: #a78247 transparent transparent transparent; transform-origin: top left; transform: rotate(-45deg); overflow: visible; } .wrapper .icon.icon12 .line.line1 { top: 32%; left: 22%; width: 30%; animation: icon12line1 0.5s ease infinite alternate; } .wrapper .icon.icon12 .line.line2 { top: 63%; left: 25%; width: 20%; animation: icon12line2 0.5s ease infinite alternate; } .wrapper .icon.icon12 .line.line2:before, .wrapper .icon.icon12 .line.line2:after { top: -0.1vw; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon12 .line.line2:before { width: 65%; left: 145%; } .wrapper .icon.icon12 .line.line2:after { width: 65%; left: 250%; } .wrapper .icon.icon12 .line.line3 { top: 63%; left: 42%; width: 20%; animation: icon12line3 0.5s ease infinite alternate; } .wrapper .icon.icon12 .line.line3:before { top: -0.2vw; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; width: 145%; left: 135%; } .wrapper .icon.icon12 .line.line4 { top: 67%; left: 55%; width: 50%; animation: icon12line4 0.5s ease infinite alternate; } .wrapper .icon.icon12 .line.line4:before { top: -0.2vw; left: 110%; width: 10%; height: 1%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon12 .line.line5 { top: 80%; left: 65%; width: 50%; animation: icon12line5 0.5s ease infinite alternate; } .wrapper .icon.icon13 .moon.bottom { top: 75%; right: 5%; width: 1%; height: 1%; animation: icon13moonbottom 5s ease 0s infinite; } .wrapper .icon.icon13 .planet { top: 17.5%; left: 17.5%; width: 65%; height: 65%; } .wrapper .icon.icon13 .ring { top: 38%; left: 10%; width: 80%; height: 24%; border-radius: 50%; border-color: transparent #a78247 #a78247 #a78247; transform: rotate(17deg); animation: icon13ring 5s ease 0s infinite alternate; } .wrapper .icon.icon13 .planetoid { top: 15%; left: 60%; width: 20%; height: 20%; background: #303030; } .wrapper .icon.icon13 .square { top: 12%; left: 45%; width: 40%; height: 26%; border-radius: 0; background: transparent !important; overflow: visible; } .wrapper .icon.icon13 .square:before { top: -10%; left: 0; width: 20%; height: 5%; border: 0.1vw solid #a78247; border-color: #a78247 #a78247 transparent transparent; animation: icon13click 2.5s ease infinite alternate; } .wrapper .icon.icon14 .top { top: 12.5%; left: 10%; width: 80%; height: 10%; border-color: transparent; overflow: visible; } .wrapper .icon.icon14 .top .line { top: 49%; height: 2%; width: 36%; border-color: #a78247 transparent transparent transparent; overflow: visible; } .wrapper .icon.icon14 .top .line:before { margin-top: -25%; padding: 18%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon14 .top .line.left { left: 15%; transform-origin: 100% 50%; animation: icon14lineleft 5s linear 0s infinite alternate; } .wrapper .icon.icon14 .top .line.left:before { margin-left: -50%; } .wrapper .icon.icon14 .top .line.right { right: 15%; transform-origin: 0% 50%; animation: icon14lineright 5s linear 0s infinite alternate; } .wrapper .icon.icon14 .top .line.right:before { margin-left: 100%; } .wrapper .icon.icon14 .top .square { top: -0.1vw; left: calc(45% - 0.1vw); padding: 6%; background: #303030; z-index: 1; } .wrapper .icon.icon14 .planet { top: 17.5%; left: 17.5%; width: 65%; height: 65%; border-color: #a78247 #a78247 transparent #a78247; transform: rotate(15deg); overflow: visible; animation: icon14planet 5s ease 0s infinite alternate; } .wrapper .icon.icon14 .planet:after { top: 75%; width: 15%; padding-top: 15%; border: 0.1vw solid #a78247; transform: rotate(-15deg); background: #303030; } .wrapper .icon.icon14 .ring { top: 37.5%; left: 10%; width: 80%; height: 25%; border-radius: 50%; border-color: transparent #a78247 #a78247 #a78247; transform: rotate(17deg); animation: icon14ring 5s ease 0s infinite alternate; } .wrapper .icon.icon14 .moon { top: 90%; left: 10%; width: 12%; height: 12%; animation: icon14moon 5s ease-in-out 0s infinite alternate; } .wrapper .icon.icon14 .pen { top: 22%; left: 30%; width: 40%; height: 65%; border: 0; overflow: visible; } .wrapper .icon.icon14 .pen .head.left { top: 0; left: 38%; height: 65%; width: 1%; border-color: transparent transparent transparent #a78247; transform-origin: top left; transform: rotate(20deg); overflow: visible; } .wrapper .icon.icon14 .pen .head.left:before { top: 100%; left: -0.15vw; height: 40%; width: 1%; border: 0.1vw solid #a78247; border-color: transparent transparent transparent #a78247; transform-origin: top center; transform: rotate(-60deg); } .wrapper .icon.icon14 .pen .head.right { top: 0; left: 60%; height: 65%; width: 1%; border-color: transparent transparent transparent #a78247; transform-origin: top center; transform: rotate(-20deg); overflow: visible; } .wrapper .icon.icon14 .pen .head.right:before { top: 100%; right: -0.15vw; height: 40%; width: 1%; border: 0.1vw solid #a78247; border-color: transparent transparent transparent #a78247; transform-origin: top center; transform: rotate(60deg); } .wrapper .icon.icon14 .pen .line { top: 0; left: 50%; width: 1%; height: 45%; border-color: transparent transparent transparent #a78247; overflow: visible; } .wrapper .icon.icon14 .pen .line:after { top: 100%; left: -0.2vw; width: 0.2vw; padding-top: 0.2vw; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon14 .pen .bottom { top: 80%; left: 18%; width: 64%; height: 15%; } .wrapper .icon.icon15 .planetoid { top: 10%; left: 20%; width: 10%; height: 10%; overflow: visible; animation: icon15planetoid 5s linear 0s infinite; } .wrapper .icon.icon15 .planetoid:before { top: 110%; left: -60%; width: 1%; height: 1%; border: 0.1vw solid #a78247; border-radius: 50%; } .wrapper .icon.icon15 .sattelite { top: 20%; left: 10%; width: 100%; height: 70%; transform: rotate(-45deg); border: 0; animation: icon15sattelite 5s linear 0s infinite alternate; } .wrapper .icon.icon15 .sattelite .solarpanel { top: 15%; width: 30%; height: 30%; overflow: visible; animation: icon15solarpanel 10s linear 0s infinite alternate; } .wrapper .icon.icon15 .sattelite .solarpanel:after { top: 50%; height: 1%; width: 125%; border: 0.1vw solid #a78247; border-color: #a78247 transparent transparent transparent; } .wrapper .icon.icon15 .sattelite .solarpanel.left { left: 0; } .wrapper .icon.icon15 .sattelite .solarpanel.right { right: 0; } .wrapper .icon.icon15 .sattelite .solarpanel.right:after { left: -30%; } .wrapper .icon.icon15 .sattelite .body { top: 0; left: 38%; width: 25%; height: 60%; overflow: visible; } .wrapper .icon.icon15 .sattelite .body:after { top: 70%; left: -0.1vw; width: 100%; padding-top: 100%; border: 0.1vw solid #a78247; border-color: transparent #a78247 #a78247 transparent; border-radius: 50%; transform: rotate(45deg); } .wrapper .icon.icon15 .sattelite .dish { top: 76%; left: 40%; width: 20%; padding-top: 20%; border-color: #a78247 #a78247 transparent transparent; border-radius: 50%; transform: rotate(-45deg); overflow: visible; animation: icon15dish 5s linear 0s infinite alternate; } .wrapper .icon.icon15 .sattelite .dish:before, .wrapper .icon.icon15 .sattelite .dish:after { transform-origin: top left; border: 0.1vw solid #a78247; } .wrapper .icon.icon15 .sattelite .dish:before { left: 10%; top: 10%; width: 110%; height: 0; border-color: #a78247 transparent transparent transparent; transform: rotate(45deg); } .wrapper .icon.icon15 .sattelite .dish:after { left: 50%; top: 50%; width: 20%; height: 0; border-color: #a78247 transparent transparent transparent; transform: rotate(135deg); } @keyframes icon1moontop { 0% { top: 10%; right: 5%; z-index: 0; } 49% { top: 60%; right: 95%; z-index: 0; } 50% { top: 60%; right: 95%; z-index: 1; } 99% { top: 10%; right: 5%; z-index: 1; } 100% { top: 10%; right: 5%; z-index: 0; } } @keyframes icon1moonbottom { 0% { top: 75%; left: 15%; z-index: 0; } 49% { top: 40%; left: 95%; z-index: 0; } 50% { top: 40%; left: 95%; z-index: -1; } 99% { top: 75%; left: 15%; z-index: -1; } 100% { top: 75%; left: 15%; z-index: 0; } } @keyframes icon2planetoid { 0% { top: 15%; left: 90%; transform: rotate(0deg); z-index: 0; } 49% { top: 80%; left: 5%; transform: rotate(720deg); z-index: 0; } 50% { top: 80%; left: 5%; transform: rotate(720deg); z-index: 1; } 99% { top: 15%; left: 90%; transform: rotate(1440deg); z-index: 1; } 100% { top: 15%; left: 90%; transform: rotate(1440deg); z-index: 0; } } @keyframes icon2ring { 0% { transform: rotate(-10deg); } 100% { transform: rotate(-30deg); } } @keyframes icon3hood { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @keyframes icon3middle { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes icon4planet { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon5body { 0% { top: 0%; left: 15%; } 100% { top: 0.5%; left: 15.5%; } } @keyframes icon5line1 { 0% { top: 60%; left: 4%; } 100% { top: 60.5%; left: 4.5%; } } @keyframes icon5line2 { 0% { top: 50%; left: 5.5%; } 100% { top: 50.5%; left: 6%; } } @keyframes icon5line3 { 0% { top: 80%; left: 17%; } 100% { top: 80.5%; left: 17.5%; } } @keyframes icon6moontop { 0% { top: 15%; left: 10%; z-index: 0; } 49% { top: 60%; left: 95%; z-index: 0; } 50% { top: 60%; left: 95%; z-index: 1; } 99% { top: 15%; left: 10%; z-index: 1; } 100% { top: 15%; left: 10%; z-index: 0; } } @keyframes icon6moonbottom { 0% { top: 85%; left: 95%; z-index: 0; } 49% { top: 40%; left: 5%; z-index: 0; } 50% { top: 40%; left: 5%; z-index: -1; } 99% { top: 85%; left: 95%; z-index: -1; } 100% { top: 85%; left: 95%; z-index: 0; } } @keyframes icon6ring { 0% { transform: rotate(10deg); } 100% { transform: rotate(30deg); } } @keyframes icon6ringplanet { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon7telescope { 0% { transform: rotate(-10deg); } 100% { transform: rotate(-30deg); } } @keyframes icon8moontop { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon8moonbottom { 0% { top: 85%; left: 95%; z-index: 0; } 49% { top: 40%; left: 5%; z-index: 0; } 50% { top: 40%; left: 5%; z-index: -1; } 99% { top: 85%; left: 95%; z-index: -1; } 100% { top: 85%; left: 95%; z-index: 0; } } @keyframes icon8ring { 0% { transform: rotate(30deg); } 100% { transform: rotate(10deg); } } @keyframes icon8planetoid { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon9planetoid { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon10orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon10planet { 0% { transform: scale(1); } 100% { transform: scale(1.25); } } @keyframes icon11planet { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @keyframes icon12planet { 0% { top: 25%; left: 10%; } 100% { top: 25.5%; left: 10.5%; } } @keyframes icon12line1 { 0% { top: 32%; left: 22%; } 100% { top: 32.5%; left: 22.5%; } } @keyframes icon12line2 { 0% { top: 63%; left: 25%; } 100% { top: 63.5%; left: 25.5%; } } @keyframes icon12line3 { 0% { top: 63%; left: 42%; } 100% { top: 63.5%; left: 42.5%; } } @keyframes icon12line4 { 0% { top: 67%; left: 55%; } 100% { top: 67.5%; left: 55.5%; } } @keyframes icon12line5 { 0% { top: 80%; left: 65%; } 100% { top: 81%; left: 66%; } } @keyframes icon13moonbottom { 0% { top: 85%; left: 95%; z-index: 0; } 49% { top: 10%; left: 5%; z-index: 0; } 50% { top: 10%; left: 5%; z-index: -1; } 99% { top: 85%; left: 95%; z-index: -1; } 100% { top: 85%; left: 95%; z-index: 0; } } @keyframes icon13ring { 0% { transform: rotate(10deg); } 100% { transform: rotate(30deg); } } @keyframes icon13click { 0% { transform: scaley(1); } 100% { transform: scaley(0); } } @keyframes icon14lineleft { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } @keyframes icon14lineright { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } } @keyframes icon14planet { 0% { transform: rotate(10deg); } 100% { transform: rotate(20deg); } } @keyframes icon14ring { 0% { transform: rotate(30deg); } 100% { transform: rotate(10deg); } } @keyframes icon14moon { 0% { left: 5%; } 100% { left: 95%; } } @keyframes icon15sattelite { 0% { transform: rotate(-40deg); } 100% { transform: rotate(-50deg); } } @keyframes icon15planetoid { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes icon15solarpanel { 0% { transform: scaley(1); } 100% { transform: scaley(0.75); } } @keyframes icon15dish { 0% { transform: rotate(-60deg); } 100% { transform: rotate(-30deg); } } </style></head><body> <div class="wrapper"> <div class="icon icon1"> <div class="moon top"></div> <div class="planet"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="line line7"></div> </div> <div class="moon bottom"></div> </div> <div class="icon icon2"> <div class="planetoid"></div> <div class="planet"></div> <div class="ring"></div> </div> <div class="icon icon3"> <div class="top"> <div class="visor"></div> <div class="hood"></div> </div> <div class="bottom"> <div class="neck"></div> <div class="line"></div> </div> <div class="middle"></div> </div> <div class="icon icon4"> <div class="planet"></div> <div class="planetoid top"></div> <div class="planetoid middle"></div> <div class="planetoid bottom"></div> </div> <div class="icon icon5"> <div class="planet"></div> <div class="rocket"> <div class="body"></div> <div class="thruster left"></div> <div class="thruster mid"></div> <div class="thruster right"></div> </div> <div class="line left"></div> <div class="line mid"></div> <div class="line right"></div> </div> <div class="icon icon6"> <div class="moon top"></div> <div class="planet"></div> <div class="ring"></div> <div class="ring planet"></div> <div class="planetoid"></div> <div class="moon bottom"></div> </div> <div class="icon icon7"> <div class="telescope"> <div class="body"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> </div> <div class="lens"></div> </div> <div class="tripod"> <div class="anchor"></div> <div class="foot left"></div> <div class="foot mid"></div> <div class="foot right"></div> </div> <div class="ground"></div> </div> <div class="icon icon8"> <div class="moon top"></div> <div class="planet"></div> <div class="ring"></div> <div class="planetoid"></div> <div class="moon bottom"></div> </div> <div class="icon icon9"> <div class="planetoid"></div> <div class="planetoid moon"></div> <div class="flag"> <div class="square"></div> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> </div> <div class="pole"></div> <div class="ground"></div> </div> <div class="icon icon10"> <div class="orbit orbit1"></div> <div class="orbit orbit2"></div> <div class="planet"></div> </div> <div class="icon icon11"> <div class="planet"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="line line7"></div> <div class="line line8"></div> <div class="line line9"></div> </div> </div> <div class="icon icon12"> <div class="planet"></div> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> </div> <div class="icon icon13"> <div class="planet"></div> <div class="ring"></div> <div class="planetoid"></div> <div class="square"></div> <div class="moon bottom"></div> </div> <div class="icon icon14"> <div class="planet"></div> <div class="ring"></div> <div class="moon"></div> <div class="top"> <div class="line left"></div> <div class="square"></div> <div class="line right"></div> </div> <div class="pen"> <div class="head left"></div> <div class="head right"></div> <div class="line"></div> <div class="bottom"></div> </div> </div> <div class="icon icon15"> <div class="planetoid"></div> <div class="sattelite"> <div class="solarpanel left"></div> <div class="body"></div> <div class="solarpanel right"></div> <div class="dish"></div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/* This Codepen is in the Public Domain. You can use it for whatever purpose you like, except evil. */ //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Dashboard React
Success and Error Icon Animation
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations

Questions / Comments: