I've being trying this since 3-4 days but am not able to get how do I make this animation, not even sure whether is possible to make one like this using only CSS3?
I tried using animation-direction:alternate;
but I am not able to get this flow in a particular angle, able to animate it in a square shape.. but not the way atom animates, any idea how this can be accomplished using pure CSS3? if not is there any solution in jQuery?
CSS allows you to animate HTML elements without JavaScript. It's used to create interesting and eye-catching effects. These include loading animation, hover animation, text animation, background animation, transition animation, and more. Getting attention in a crowded web space is crucial.
Found this online.
It utilizes the transform-style: preserve-3d
property and rotates the electrons on the x, y and z axis to achieve this 3D effect.
HTML Structure
<div id="main">
<div id="atom">
<div class="orbit">
<div class="path">
<div class="electron"></div>
</div>
</div>
<div class="orbit">
<div class="path">
<div class="electron"></div>
</div>
</div>
<div class="orbit">
<div class="path">
<div class="electron"></div>
</div>
</div>
<div class="orbit">
<div class="path">
<div class="electron"></div>
</div>
</div>
<div id="nucleus"></div>
</div>
</div>
CSS
.orbit {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg) rotateY(20deg);
}
#atom .orbit:nth-child(2) {
-webkit-transform: rotateX(80deg) rotateY(70deg)
}
#atom .orbit:nth-child(3) {
-webkit-transform: rotateX(80deg) rotateY(-20deg)
}
#atom .orbit:nth-child(4) {
-webkit-transform: rotateX(80deg) rotateY(-50deg)
}
.path {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: pathRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.electron {
-webkit-animation-name: electronFix;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes pathRotate {
from {
-webkit-transform: rotateZ(0deg);
} to {
-webkit-transform: rotateZ(360deg);
}
}
@-webkit-keyframes electronFix {
from {
-webkit-transform: rotateX(90deg) rotateY(0deg);
} to {
-webkit-transform: rotateX(90deg) rotateY(-360deg);
}
}
Fiddle
Blog Post
Definitely possible with CSS. I put an extremely basic together as a proof of concept before noticing @prashanth's post. The one he found is waaay cooler, but here's mine anyway...super bare-bones but a little fiddling and it'd look pretty good.
http://jsfiddle.net/BZFJ8/2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With