CSS Atom Animation

HTML
<div class="orbit"> <div class="prot"></div> <div class="elec sp1"></div> </div> <div class="orbit rot45"><div class="elec sp2"></div></div> <div class="orbit rot90"><div class="elec sp3"></div></div> <div class="orbit rot135"><div class="elec sp4"></div></div>
CSS
body { position: relative; height: 100vh; background-image: radial-gradient( rgba(255, 220, 178, 0.7), rgba(145, 64, 0, 0.7)); } .orbit { position: absolute; z-index: 10; width: 100px; height: 200px; left: 50%; top: 50%; margin: -100px -50px; border: 4px solid rgba(137, 57, 0, 0.5); border-radius: 50%; background-image: radial-gradient( rgba(255, 173, 75, 0.4), rgba(145, 64, 0, 0.4)); } .rot45 { z-index: 6; transform: rotate(45deg); } .rot90 { z-index: 4; transform: rotate(90deg); } .rot135 { z-index: 6; transform: rotate(135deg); } .prot { position: relative; width: 10px; height: 10px; margin: 95px 45px; border-radius: 50%; background-color: rgb(59, 32, 0); background-color: rgba(59, 32, 0, 0.7); animation: pulse 5s infinite; } .elec { position: absolute; top: 96px; left: -6px; } .elec:after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(59, 32, 0, .7); } .sp1 { animation: lr 10s infinite; } .sp1:after { animation: ud 10s infinite; } .sp2 { animation: lr 6s infinite; } .sp2:after { animation: ud 6s infinite; } .sp3 { animation: lr 16s infinite; } .sp3:after { animation: ud 16s infinite; } .sp4 { animation: lr 5s infinite; } .sp4:after { animation: ud 5s infinite; } @keyframes pulse { 0%, 100% { background-color: rgba(59, 32, 0, 0.7); } 50% { background-color: rgba(204, 132, 0, 0.8); transform: scale(2); } } @keyframes lr { 0% { animation-timing-function: ease-in; transform: translateX(0px); } 25% { animation-timing-function: ease-out; transform: translateX(51px); } 50% { animation-timing-function: ease-in; transform: translateX(104px); } 75% { animation-timing-function: ease-out; transform: translateX(51px); } 100% { transform: translateX(0px); } } @keyframes ud { 0% { animation-timing-function: ease-out; transform: translateY(0px); } 25% { animation-timing-function: ease-in; transform: translateY(-102px); } 50% { animation-timing-function: ease-out; transform: translateY(0px); } 75% { animation-timing-function: ease-in; transform: translateY(102px); } 100% { transform: translateY(0px); } }
JAVASCRIPT
Expand for more options Login