How to make an atom like animation using CSS3 animations?

Question

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?

Atom

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?

This should be closed on the same grounds the OP came up to close things like http://stackoverflow.com/questions/16500907/collapsible-panel-in-html-css (i personally think both are valid, but the OP clearly have double standards) — gcb, Oct 29 '13 at 20:26
@gcb I don't mind closing it, if you compare the dates, I had asked this question when I was new to the website and was not aware of the rules :) — Mr. Alien, Oct 30 '13 at 04:23
@gcb If you see [this](http://stackoverflow.com/q/13132864/1542290), you will find mine a lot better :) — Mr. Alien, Oct 30 '13 at 04:31

score 17 · Accepted Answer · edited Jun 10 '14 at 14:45

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

its really awesome, but i dont understand one thing, if i can directly use the atom gif image, why would i go for css, where i have to write so much code.. :( — Rahul R., Oct 06 '12 at 07:29
@RahulR. it's just fun to know what css alone can do, obviously you can use gif, which is even, better, no cross browser issues nothing but, than too I wanted a css solution ;) — Mr. Alien, Oct 06 '12 at 08:18

score 7 · Answer 2 · answered Oct 06 '12 at 07:09

7

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/

answered Oct 06 '12 at 07:09

Adrien Delessert

1,360
12
17

agree that your's is quiet smart, but I don't have any Idea to float that ball from back to front, but a nice example +1 – Mr. Alien Oct 06 '12 at 08:17
Manipulating the Z value in the translate3d property in the keyframe animation would let you change the electrons' relative position front-to-back, and adding a scale() value to the keyframes would let you change their size as they appear to move front to back. – Adrien Delessert Oct 06 '12 at 22:26

score 0 · Answer 3 · answered Oct 06 '12 at 12:29

0

I think this one also looks like what you asked for but they said it is for Safari only animation as of Chrome 9

http://bgre.at/demo/CSS3-atom/index.html

You might find a solution with Jquery if you care about browser compatibly.

answered Oct 06 '12 at 12:29

Maduka Jayalath

1,338
1
14
15

How to make an atom like animation using CSS3 animations?

3 Answers3

Linked