Objectives and outcomes

In this tutorial we are to make an animation of atom with orbiting electrons by using various properties of CSS3. We are going to learn about transform, animation, gradients and flexbox in CSS3.





HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Atom animation</title>
</head>
<body>
<div class="atom">
<div class="atom-nucleus"></div>
<div class="atom-orbit atom-orbit--left atom-orbit-vis"></div>
<div class="atom-orbit atom-orbit--right atom-orbit-vis"></div>
<div class="atom-orbit atom-orbit--top atom-orbit-vis"></div>
<div class="atom-orbit atom-orbit--left atom-orbit--foreground">
<div class="atom-electron"></div>
</div>
<div class="atom-orbit atom-orbit--right atom-orbit--foreground">
<div class="atom-electron"></div>
</div>
<div class="atom-orbit atom-orbit--top atom-orbit--foreground">
<div class="atom-electron"></div>
</div>
</div>
</body>
</html>


CSS stylesheet

<style>
.atom 
{
width: 250px;
height: 250px;
position: relative;
padding: 30px;
}
	
.atom-nucleus,
.atom-nucleus:before 
{
position: absolute;
background: -webkit-linear-gradient(270deg, #585858 0%, #585858 100%);
background: linear-gradient(-180deg, #585858 0%, #585858 100%);
}
	
.atom-nucleus 
{
display: block;
content:"";
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 50%;
top: 155px;
left: 155px;
}
	
.atom-nucleus:before 
{
display: block;
content:"";
width: 36px;
height: 36px;
margin-left: -18px;
margin-top: -18px;
border-radius: 50%;
top: 10px;
left: 10px;
opacity: 0.15;
}
	
.atom-orbit 
{
position: absolute;
width: 250px;
height: 250px;
border: solid 4px transparent;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
	
.atom-orbit-vis 
{
border-radius: 50%;
border-color: #597578;
}
	
.atom-electron 
{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
	
.atom-electron:before 
{
display: block;
content: "";
width: 24px;
height: 24px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
position: absolute;
top: 125px;
left: 125px;
}
	
.atom-electron:after 
{
display: block;
content: "";
width: 16px;
height: 16px;
margin-left: -8px;
margin-top: -8px;
border-radius: 50%;
position: absolute;
top: 125px;
left: 125px;
border-color: rgba(255, 255, 255, 0.4);
}
	
.atom-orbit--top.atom-orbit-vis 
{
-webkit-transform: rotateZ(0deg) rotateY(70deg);
transform: rotateZ(0deg) rotateY(70deg);
}
	
.atom-orbit--top.atom-orbit--foreground 
{
-webkit-transform: translateZ(100px) rotateZ(0deg) rotateY(70deg);
transform: translateZ(100px) rotateZ(0deg) rotateY(70deg);
}
	
@-webkit-keyframes rotate-top 
{
0% {
-webkit-transform: rotate(0deg) translate(-125px) rotate(0deg);
transform: rotate(0deg) translate(-125px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(-125px) rotate(-360deg);
transform: rotate(360deg) translate(-125px) rotate(-360deg);
}
}
	
@keyframes rotate-top 
{
0% {
-webkit-transform: rotate(0deg) translate(-125px) rotate(0deg);
transform: rotate(0deg) translate(-125px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(-125px) rotate(-360deg);
transform: rotate(360deg) translate(-125px) rotate(-360deg);
}
}
	
.atom-orbit--top .atom-electron 
{
-webkit-animation: rotate-top infinite linear;
animation: rotate-top infinite linear;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
	
.atom-orbit--top .atom-electron:before, .atom-orbit--top .atom-electron:after 
{
-webkit-transform: rotateY(-70deg) rotateZ(0deg);
transform: rotateY(-70deg) rotateZ(0deg);
}
	
.atom-orbit--top .atom-electron:before 
{
background: -webkit-linear-gradient(270deg, #000 0%, #597578 100%);
background: linear-gradient(-180deg, #000 0%, #597578 100%);
opacity: 0.3;
}
	
.atom-orbit--top .atom-electron:after 
{
background: -webkit-linear-gradient(270deg, #fad161 0%, #f99337 100%);
background: linear-gradient(-180deg, #fad161 0%, #f99337 100%);
}
	
.atom-orbit--left.atom-orbit-vis 
{
-webkit-transform: rotateZ(-60deg) rotateY(70deg);
transform: rotateZ(-60deg) rotateY(70deg);
}
	
.atom-orbit--left.atom-orbit--foreground 
{
-webkit-transform: translateZ(100px) rotateZ(-60deg) rotateY(70deg);
transform: translateZ(100px) rotateZ(-60deg) rotateY(70deg);
}
	
@-webkit-keyframes rotate-left 
{
0% {
-webkit-transform: rotate(60deg) translate(-125px) rotate(-60deg);
transform: rotate(60deg) translate(-125px) rotate(-60deg);
}
100% {
-webkit-transform: rotate(420deg) translate(-125px) rotate(-420deg);
transform: rotate(420deg) translate(-125px) rotate(-420deg);
}
}
	
@keyframes rotate-left 
{
0% {
-webkit-transform: rotate(60deg) translate(-125px) rotate(-60deg);
transform: rotate(60deg) translate(-125px) rotate(-60deg);
}
100% {
-webkit-transform: rotate(420deg) translate(-125px) rotate(-420deg);
transform: rotate(420deg) translate(-125px) rotate(-420deg);
}
}
	
.atom-orbit--left .atom-electron
{
-webkit-animation: rotate-left infinite linear;
animation: rotate-left infinite linear;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
	
.atom-orbit--left .atom-electron:before, .atom-orbit--left .atom-electron:after 
{
-webkit-transform: rotateY(-70deg) rotateZ(60deg);
transform: rotateY(-70deg) rotateZ(60deg);
}
	
.atom-orbit--left .atom-electron:before 
{
background: -webkit-linear-gradient(270deg, #598232 0%, #87C600 100%);
background: linear-gradient(-180deg, #598232 0%, #87C600 100%);
opacity: 0.3;
}
	
.atom-orbit--left .atom-electron:after 
{
background: -webkit-linear-gradient(270deg, #598232 0%, #87C600 100%);
background: linear-gradient(-180deg, #598232 0%, #87C600 100%);
}
	
.atom-orbit--right.atom-orbit-vis 
{
-webkit-transform: rotateZ(60deg) rotateY(70deg);
transform: rotateZ(60deg) rotateY(70deg);
}
	
.atom-orbit--right.atom-orbit--foreground 
{
-webkit-transform: translateZ(100px) rotateZ(60deg) rotateY(70deg);
transform: translateZ(100px) rotateZ(60deg) rotateY(70deg);
}
	
@-webkit-keyframes rotate-right 
{
0% {
-webkit-transform: rotate(120deg) translate(-125px) rotate(-120deg);
transform: rotate(120deg) translate(-125px) rotate(-120deg);
}
100% {
-webkit-transform: rotate(480deg) translate(-125px) rotate(-480deg);
transform: rotate(480deg) translate(-125px) rotate(-480deg);
}
}
	
@keyframes rotate-right 
{
0% {
-webkit-transform: rotate(120deg) translate(-125px) rotate(-120deg);
transform: rotate(120deg) translate(-125px) rotate(-120deg);
}
100% {
-webkit-transform: rotate(480deg) translate(-125px) rotate(-480deg);
transform: rotate(480deg) translate(-125px) rotate(-480deg);
}
}
	
.atom-orbit--right .atom-electron 
{
-webkit-animation: rotate-right infinite linear;
animation: rotate-right infinite linear;
-webkit-animation-duration: 2.3s;
animation-duration: 2.3s;
}
	
.atom-orbit--right .atom-electron:before, .atom-orbit--right .atom-electron:after 
{
-webkit-transform: rotateY(-70deg) rotateZ(-60deg);
transform: rotateY(-70deg) rotateZ(-60deg);
}
	
.atom-orbit--right .atom-electron:before 
{
background: -webkit-linear-gradient(270deg, #598232 0%, #87C600 100%);
background: linear-gradient(-180deg, #598232 0%, #87C600 100%);
opacity: 0.3;
}
	
.atom-orbit--right .atom-electron:after 
{
background: -webkit-linear-gradient(270deg, #598232 0%, #87C600 100%);
background: linear-gradient(-180deg, #598232 0%, #87C600 100%);
}
</style>


flexbox: It is used to adjust the content inside container to different screen sizes. Also it is an improvement over display:block property.
linear-gradient: It is used to show transition between two or more colors. Its argument list consist of (direction,color1,color2).
transform: It is used to translate, skew and rotate any document object.
animation: It is used to attach a visual effect on any document object. It consist of various arguments such as animation-effect, duration, animation-speed etc.