<title>Atom Model</title>
        <link  href="//fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet" type="text/css" >
        <link  href="//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700" rel="stylesheet" type="text/css" >

        <style type="text/css">
			/* Animations styles written long-hand for easy customization */
			body { background:#514E89; margin:0; background: -webkit-gradient(linear, left top, left bottom, from(#52697d), to(#74527d), color-stop(0.5, #52697d), color-stop(0.5, #52697d)); color: #f8f8f2; font-family: 'Lato', sans-serif; font-size: 16px; font-style: normal; font-weight: 300;}
            #wrap { width:960px; margin:0 auto; padding:50px 0 50px; background: -webkit-gradient(radial, 480 350, 480, 480 350, 100, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .3))); }
            #main { width:650px; min-height: 750px; margin: 0 auto; overflow: hidden /*Chrome fix*/; position: relative}
			article { padding: 25px 50px; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; background: rgba(0,0,0,0.2); width: 520px; margin: -80px auto 0 auto; overflow: hidden}
            h1 { font-size: 200px; text-align: center; font-weight: 100; line-height: 80%; position: absolute; top: 10px; width: 100%; text-shadow: 0px 2px 50px rgba(0,0,0,0.5) }
            h2 { font-size: 24px; font-weight: 300; text-align: center;}
            span {font-family: 'Yanone Kaffeesatz', sans-serif; font-style: normal; font-weight: 700; }
			h1 span {font-size: 160px; display:block; text-align: center; }
			#main:hover h1 { display: none;}
			a { color:#f8f8f2 }
			#atom { width:600px; height:600px; -webkit-perspective: 1000; position:relative; margin:0 auto; }
            #main:hover #atom {opacity:1}
            #nucleus { position:absolute; top:50%; left:50%; margin: -50px 0 0 -50px; width:100px; height:100px; border-radius:100px; -webkit-border-radius:100px; -moz-border-radius:100px; background:#32424f; }
			#main:hover #nucleus {background: -webkit-gradient(radial, 35 30, 20, 50 50, 51, from(#9bbcd9), color-stop(0.8, #467cab), to(rgba(70, 124, 170,.3))); -webkit-animation-name: Glow; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
            .orbit { position:absolute; top:0; left:0; width:600px; height:600px; border-radius:600px; -webkit-border-radius:600px; -moz-border-radius:600px; border:3px solid #32424f; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(80deg) rotateY(20deg);}
            #main:hover .orbit {border:3px solid rgba(248, 248, 242,.2); }
            #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)}
            #atom .orbit:nth-child(2) .path, #atom .orbit:nth-child(2) .electron {-webkit-animation-delay: -1.0s}
            #atom .orbit:nth-child(3) .path, #atom .orbit:nth-child(3) .electron {-webkit-animation-delay: -1.5s}
            #atom .orbit:nth-child(4) .path, #atom .orbit:nth-child(4) .electron {-webkit-animation-delay: -0.5s}
			.path { width:600px; height:600px; position:relative; -webkit-transform-style: preserve-3d; -webkit-animation-name: pathRotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
			#main:hover .path {-webkit-animation-name: pathRotateRev;}
			.electron { position: absolute; top:-5px; left:50%; margin-left:-5px; width:10px; height:10px; border-radius:10px; background:#32424f; -webkit-animation-name: electronFix; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;  }
			#main:hover .electron { background: #c752bd; -webkit-animation-name: electronFixRev;}
			@-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } }
			@-webkit-keyframes pathRotateRev { 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);  } }
			@-webkit-keyframes electronFixRev { from { -webkit-transform: rotateX(90deg) rotateY(0deg); } to { -webkit-transform: rotateX(90deg) rotateY(360deg);  } }
			@-webkit-keyframes Glow { 0%  { } 50% { -webkit-box-shadow: 0 0 150px rgba(248, 248, 242,.4) } 100%  { }}
        <div id="wrap">
        	<div id="main">
            <div id="atom">
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                <div class="orbit">
                    <div class="path">
                        <div class="electron"></div>
                <div id="nucleus"></div>
            <h2>N0 Imgs, No JS, just pure CSS3 Power on Webkit</h2>
            <p style="float:left">Designed by: <strong>B></strong></p>
            <p style="float:right"><a href="http://twitter.com/bgreater">follow></a></p>

This animated Atom Model work for webkit (actually only Safari as of Chrome 9) but showcases what can be done with Emerging CSS. Take a look at the result (Use Safari) bgre.at/demo/CSS3-atom/… or Fork me on jsfiddle -> jsfiddle.net/bgreater/kfgVr/