HTML/CSS Tutorials

Web Design Blog / HTML/CSS Tutorials / CSS3 Loading Animation Loop 2 Set

CSS3 Loading Animation Loop 2 Set

Tags:

Hi guys, I wanted to create more CSS3 animations, this time experimenting with different methods to create simple loading animation loop. I used the translate property and the cubic-bezier property. I remember this animations are only visible in Firefox, Safari and Chrome. Let's see this new experiment!

CSS3 Loading Loop 2Set Full

VIEW DEMO

First Example CSS3 Loading Animation Loop

css3-loading-loop-v2-first-example

HTML

The markup of this first animation is very simple. Just create a div ball-arc that allows us to control the speed and move of the X-axis, then create a div point with our graphics and add animation, which allows us to move on the Y axis.

<div class="ball-arc">  
     <div class="point"></div>  
</div>  
       
<div class="ball-arcOpp">  
     <div class="point"></div>  
</div>

CSS

Here we choose our graphics we like, and we add our animations. We have used the translate property to create the effect thanks to the cubic-bezier property.

.point, .point2 {
	background-color:#2187e7; 
	background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	
	width:3px;
	height:3px;
	border-radius:50px;
	box-shadow:0 0 5px #00c6ff;
	
	margin:0 auto;
}

.ball-arc, .ball-arcOpp {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.point       { -moz-animation: ball-y 2s infinite cubic-bezier(0, 0, 0.35, 1);
	       -webkit-animation: ball-y 2s infinite cubic-bezier(0, 0, 0.35, 1); }

.ball-arc    { -moz-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, -1);
	       -webkit-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, -1); }

.ball-arcOpp { -moz-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, 1);
	       -webkit-animation: ball-x 2s infinite cubic-bezier(0, 0, 0, 1); }


@-moz-keyframes ball-x {
	0%   { -moz-transform:translateX(0px); }
	25%  { -moz-transform:translateX(5px); }
	50%  { -moz-transform:translateX(0px); }
	75%  { -moz-transform:translateX(-5px);}
	100% { -moz-transform:translateX(0px); }	
}

@-moz-keyframes ball-y {
	0%   { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
	25%  { -moz-transform: translateY(25px); }
	50%  { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
	75%  { -moz-transform: translateY(25px); }
	100% { -moz-transform: translateY(0px); }		
}

@-webkit-keyframes ball-x {
	0%   { -webkit-transform:translateX(0px); }
	25%  { -webkit-transform:translateX(5px); }
	50%  { -webkit-transform:translateX(0px); }
	75%  { -webkit-transform:translateX(-5px);}
	100% { -webkit-transform:translateX(0px); }	
}

@-webkit-keyframes ball-y {
	0%   { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
	25%  { -webkit-transform: translateY(25px); }
	50%  { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
	75%  { -webkit-transform: translateY(25px); }
	100% { -webkit-transform: translateY(0px); }		
}

Second Example CSS3 Loading Animation Loop

css3-loading-loop-v2-second-example

HTML

Same procedure as the first example, this time we added more items to make things more interesting.

<div class="ball-arc2nd">  
     <div class="point2nd"></div>  
</div>  
       
<div class="ball-arc3nd">  
     <div class="point3nd"></div>  
</div>  
       
<div class="ball-arc4nd">  
     <div class="point4nd"></div>  
</div>

CSS

The CSS does not change much but we have exploited the knowledge of the first example for recreating something more complicated thanks to the CSS3 properties.

.point2nd, .point3nd, .point4nd {
	background-color:#2187e7; 
	background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	
	width:3px;
	height:3px;
	border-radius:50px;
	box-shadow:0 0 5px #00c6ff;
	
	margin:0 auto;
}

.ball-arc2nd, .ball-arc3nd, .ball-arc4nd {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.point2nd       { -moz-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1); 
		  -webkit-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.point3nd       { -moz-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1);
		  -webkit-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1); }
.point4nd       { -moz-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1);
		  -webkit-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1); }

.ball-arc2nd    { -moz-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
		  -webkit-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.ball-arc3nd    { -moz-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
		  -webkit-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.ball-arc4nd    { -moz-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
		  -webkit-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }


@-moz-keyframes ball-2ndx {
	0%   { -moz-transform:translateX(0px); }
	25%  { -moz-transform:translateX(100px); -moz-animation-timing-function: ease-in; }
	50%  { -moz-transform:translateX(0px); }
	75%  { -moz-transform:translateX(-100px); -moz-animation-timing-function: ease-in;}
	100% { -moz-transform:translateX(0px); }	
}

@-moz-keyframes ball-3ndx {
	0%   { -moz-transform:translateX(0px); }
	25%  { -moz-transform:translateX(35px); -moz-animation-timing-function: ease-in; }
	50%  { -moz-transform:translateX(0px); }
	75%  { -moz-transform:translateX(-35px); -moz-animation-timing-function: ease-in;}
	100% { -moz-transform:translateX(0px); }	
}

@-moz-keyframes ball-4ndx {
	0%   { -moz-transform:translateX(0px); }
	25%  { -moz-transform:translateX(25px); -moz-animation-timing-function: ease-in; }
	50%  { -moz-transform:translateX(0px); }
	75%  { -moz-transform:translateX(-25px); -moz-animation-timing-function: ease-in;}
	100% { -moz-transform:translateX(0px); }	
}


@-moz-keyframes ball-2ndy {
	0%   { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
	25%  { -moz-transform: translateY(25px); }
	50%  { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
	75%  { -moz-transform: translateY(25px); }
	100% { -moz-transform: translateY(0px); }		
}

@-moz-keyframes ball-3ndy {
	0%   { -moz-transform: translateY(-50px); -moz-animation-timing-function: ease-in;}
	25%  { -moz-transform: translateY(50px); }
	50%  { -moz-transform: translateY(100px); -moz-animation-timing-function: ease-in; }
	75%  { -moz-transform: translateY(50px); }
	100% { -moz-transform: translateY(-50px); }		
}

@-moz-keyframes ball-4ndy {
	0%   { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
	25%  { -moz-transform: translateY(30px); }
	50%  { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
	75%  { -moz-transform: translateY(30px); }
	100% { -moz-transform: translateY(0px); }		
}

@-webkit-keyframes ball-2ndx {
	0%   { -webkit-transform:translateX(0px); }
	25%  { -webkit-transform:translateX(100px); -webkit-animation-timing-function: ease-in; }
	50%  { -webkit-transform:translateX(0px); }
	75%  { -webkit-transform:translateX(-100px); -webkit-animation-timing-function: ease-in;}
	100% { -webkit-transform:translateX(0px); }	
}

@-webkit-keyframes ball-3ndx {
	0%   { -webkit-transform:translateX(0px); }
	25%  { -webkit-transform:translateX(35px); -webkit-animation-timing-function: ease-in; }
	50%  { -webkit-transform:translateX(0px); }
	75%  { -webkit-transform:translateX(-35px); -webkit-animation-timing-function: ease-in;}
	100% { -webkit-transform:translateX(0px); }	
}

@-webkit-keyframes ball-4ndx {
	0%   { -webkit-transform:translateX(0px); }
	25%  { -webkit-transform:translateX(25px); -webkit-animation-timing-function: ease-in; }
	50%  { -webkit-transform:translateX(0px); }
	75%  { -webkit-transform:translateX(-25px); -webkit-animation-timing-function: ease-in;}
	100% { -webkit-transform:translateX(0px); }	
}


@-webkit-keyframes ball-2ndy {
	0%   { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
	25%  { -webkit-transform: translateY(25px); }
	50%  { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
	75%  { -webkit-transform: translateY(25px); }
	100% { -webkit-transform: translateY(0px); }		
}

@-webkit-keyframes ball-3ndy {
	0%   { -webkit-transform: translateY(-50px); -webkit-animation-timing-function: ease-in;}
	25%  { -webkit-transform: translateY(50px); }
	50%  { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-in; }
	75%  { -webkit-transform: translateY(50px); }
	100% { -webkit-transform: translateY(-50px); }		
}

@-webkit-keyframes ball-4ndy {
	0%   { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
	25%  { -webkit-transform: translateY(30px); }
	50%  { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
	75%  { -webkit-transform: translateY(30px); }
	100% { -webkit-transform: translateY(0px); }		
}

Third Example CSS3 Loading Animation Loop

css3-loading-loop-v2-third-example

HTML

The last example in contrast to previous uses an empty div inside with our elements which is then connected to our animation.

<div class="ball-circle">  
     <div class="pointcircle"></div>  
     <div class="pointcircle2"></div>  
     <div class="pointcircle3"></div>  
     <div class="pointcircle4"></div>  
     <div class="pointcircle5"></div>  
</div>

CSS

As you see the CSS is much easier and we also added properties such as the delay and set the opacity to create a nice effect, we always use the cubic-bezier with the translate properties to have greater control over speed curve animation.

.pointcircle, .pointcircle2, .pointcircle3, .pointcircle4, .pointcircle5{
	background-color:#2187e7; 
	background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
	
	width:3px;
	height:3px;
	border-radius:50px;
	box-shadow:0 0 5px #00c6ff;
	
	margin:0 auto;
	position:relative;
}

.pointcircle     { -moz-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1); 
		   -webkit-animation: ball-circlex 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.pointcircle2    { -moz-animation: ball-circlex 2s 0.1s infinite cubic-bezier(0, 0, 0.35, 1);
		   -webkit-animation: ball-circlex 2s 0.1s infinite cubic-bezier(0, 0, 0.35, 1); opacity:0.7; top:1px; }
.pointcircle3    { -moz-animation: ball-circlex 2s 0.2s infinite cubic-bezier(0, 0, 0.35, 1);
		   -webkit-animation: ball-circlex 2s 0.2s infinite cubic-bezier(0, 0, 0.35, 1); opacity:0.5; top:2px; }
.pointcircle4    { -moz-animation: ball-circlex 2s 0.3s infinite cubic-bezier(0, 0, 0.35, 1);
		   -webkit-animation: ball-circlex 2s 0.3s infinite cubic-bezier(0, 0, 0.35, 1); opacity:0.3; top:3px; }
.pointcircle5    { -moz-animation: ball-circlex 2s 0.4s infinite cubic-bezier(0, 0, 0.35, 1);
		   -webkit-animation: ball-circlex 2s 0.4s infinite cubic-bezier(0, 0, 0.35, 1); opacity:0.1; top:4px; }

@-moz-keyframes ball-circlex {
	0%   { -moz-transform:translateX(0px); }
	25%  { -moz-transform:translateX(25px); -moz-animation-timing-function: ease-in; }
	50%  { -moz-transform:translateX(0px); }
	75%  { -moz-transform:translateX(-25px); -moz-animation-timing-function: ease-in;}
	100% { -moz-transform:translateX(0px); }	
}

@-webkit-keyframes ball-circlex {
	0%   { -webkit-transform:translateX(0px); }
	25%  { -webkit-transform:translateX(25px); -webkit-animation-timing-function: ease-in; }
	50%  { -webkit-transform:translateX(0px); }
	75%  { -webkit-transform:translateX(-25px); -webkit-animation-timing-function: ease-in;}
	100% { -webkit-transform:translateX(0px); }	
}

VIEW DEMO

Conclusion

With this tutorial I wanted to try more in depth the potential of CSS3, if you have any comments or advice please feel free to comment.

Share and Enjoy:

  • Twitter
  • Facebook
  • LinkedIn
  • del.icio.us
  • StumbleUpon
  • Digg
  • Google Buzz
  • Reddit
  • RSS
  • blogmarks
  • Design Float
  • Diigo
  • DZone
  • email
  • FriendFeed
  • Identi.ca
  • Ping.fm
  • Plurk
  • Posterous
  • Slashdot
  • Suggest to Techmeme via Twitter
  • Technorati
  • Tumblr

About The Author

Alessio Atzeni, based in Rome, Italy, is a dedicated web designer and front-end developer with a passion for CSS3. He specializes in CSS and JavaScript web development, and building search engine friendly websites. For more front-end web development tutorials and CSS3 experiments, check out his web design blog. Follow him on Twitter @Bluxart or add him on Google+

8 comments…Add Comment

  1. Federico / Bfred.it

    Excellent!

    I think you should put a like button somewhere because I don’t feel like saying it every time… plus I’d look like a spammer :D

  2. Bluxart

    Thanks!

    You’re right I’ll put something: D

  3. step

    Today seems to be the day for me to see alot about css animations. I really thinks those are cool. Finding something to use it for probably won’t be difficult. :) Thanks for the codes.

  4. Jose Browne

    Awesome!

  5. slicey

    really cool! thanks for sharing this! :) keep it up!

  6. Yem

    Wooow awesome effects !

  7. Maicon Sobczak

    Incredible effects! I wish I could use in my websites, but IE leaves no…

  8. Ganesh

    awesome, cant leave without appreciating :-)

Leave a response

Sponsored By