How to make an atom like animation using CSS3 anim

问题:

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?

回答1:

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

回答2:

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/

回答3:

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.