Orbiting Elements (using css)

Here's a cool attention grabbing effect you can create using CSS animations. If you don't know what CSS animations are, they make it possible to animate transitions from one CSS style configuration to another. And using these CSS animations, you can move elements around the screen, change their size, color, and other style attributes and stuff.

Well.. You could create a gif instead, and that might be better for really simple animations in your website. But again, CSS animations gives you a lot more control and lets you do a lot of complex things.

A breif example of an orbiting element:

<style>     

.orbitingElement { 
animation-name: orbitElementAnim;
animation-duration: 8.5s;        
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out; 
}     
@keyframes orbitElementAnim {       
from {           
left: -25px;      
top: -12px;     
z-index: 1;       
transform: scale(0.75);  
}   

25% {        
transform: scale(1.0);   
}        

50% { 
left: 64px;  
top: 32px;    
z-index: 1;  
transform: scale(0.75);  
}         

55% {   
z-index: -1;    
}         

75% {  
transform: scale(0.5);  
}        

90% {    
z-index: -1;     
}    

to {  
left: -25px;     
top: -12px;      
z-index: 1;       
transform: scale(0.75);  
}     
  
  
} 


</style> 
<div style="position: relative;">     
<img style="position: relative;" id="planet" src="PATH TO IMAGE 1">    
<img class="orbitingElement" style="position: absolute; top: -12px; left: -25px;" id="moon" src="PATH TO IMAGE 2"> </div>

Go back?