Browser Orbit – CSS3 Animation using Keyframes and Transform

I did some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share.

Note: Before going I like to make something clear,
Please use the latest version of Chrome or Safari browser for the best experience of CSS3 animation. Demos will not work in IE, Firefox (works partially) and Opera.

Browser Orbit

Browser Orbit is something similar to solar system concept which all browsers rounds the earth and the animation happens using CSS3 Keyframes and Transform. Little bit of JavaScript is used for you to play to adjust Rotation or Zooming with a slider. Below is the screenshot of Browser Orbit,

Click to see the demo

View Demo

More Demos With Code Snippet

More of CSS3 animation created using Keyframes and Transform. HTML and CSS snippets are shared in each demos. If you have problem in seeing the animation, click here to see

View More Demos


Wheeling Chrome

Google Chrome
.

HTML

<div id="chrome">
	<img src="256-chrome.png" />
</div>

CSS

@keyframes wheel{
	0%{
		opacity:0.2;
		left:2px;
		transform:scale(1) rotate(0deg);
	}
	100%{
		left: 800px;
		opacity:1;
		transform:scale(1) rotate(2000deg);
	}
}
@-webkit-keyframes wheel{
	0%{
		opacity:0.2;
		left:2px;
		-webkit-transform:scale(1) rotate(0deg);
	}
	100%{
		left: 800px;
		opacity:1;
		-webkit-transform:scale(1) rotate(2000deg);
	}
}
@-moz-keyframes wheel{
	0%{
		opacity:0.2;
		left:2px;
		-moz-transform:scale(1) rotate(0deg);
	}
	100%{
		left: 800px;
		opacity:1;
		-moz-transform:scale(1) rotate(2000deg);
	}
}

#chrome {
	position:absolute;
	animation: wheel 10s ease-in-out infinite alternate;
	-moz-animation: wheel 10s ease-in-out infinite alternate;
	-webkit-animation: wheel 10s ease-in-out infinite alternate;
}


Flying Firefox

Mozilla Firefox

HTML

<div id="firefox">
	<img src="256-firefox.png" />
</div>

CSS

@keyframes fly{
	0%{
		transform:scale(1) rotate(0deg);
	}
	100%{
		transform:scale(1) rotate(360deg);
	}
}
@-moz-keyframes fly{
	0%{
		-moz-transform:scale(1) rotate(0deg);
	}
	100%{
		-moz-transform:scale(1) rotate(360deg);
	}
}
@-webkit-keyframes fly{
	0%{
		-webkit-transform:scale(1) rotate(0deg);
	}
	100%{
		-webkit-transform:scale(1) rotate(360deg);
	}
}

#firefox{
	animation: fly 13s linear infinite normal 1s;
	-moz-animation: fly 13s linear infinite normal 1s;
	-webkit-animation: fly 13s linear infinite normal 1s;
	position:relative;
	width:500px;
}


Spinning IE

(works only in Google Chrome or Safari browser)

Microsoft Internet Explorer

HTML

<div id="ie">
	<img src="256-ie.png" />
</div>

CSS

@keyframes spin{
	0%{
		transform: rotateY(0deg);
	}
	100%{
		transform:  rotateY(360deg);
	}
}
@-moz-keyframes spin{
	0%{
		-moz-transform: rotateY(0deg);
	}
	100%{
		-moz-transform:  rotateY(360deg);
	}
}
@-webkit-keyframes spin{
	0%{
		-webkit-transform: rotateY(0deg);
	}
	100%{
		-webkit-transform:  rotateY(360deg);
	}
}

#ie{
	animation: spin 5s linear infinite normal;
	-moz-animation: spin 5s linear infinite normal;
	-webkit-animation: spin 5s linear infinite normal;
	display:inline-block;
}


Tilting Safari

(works only in Google Chrome or Safari browser)

Apple Safari

HTML

<div id="safari">
	<img src="256-safari.png" />
</div>

CSS

@keyframes rotate{
	0%{
		opacity:0.6;
		transform:  rotateX(-290deg);
	}
	100%{
		opacity:1;
		transform:  rotateX(-330deg);
	}
}
@-moz-keyframes rotate{
	0%{
		opacity:0.6;
		-moz-transform:  rotateX(-290deg);
	}
	100%{
		opacity:1;
		-moz-transform:  rotateX(-330deg);
	}
}@-webkit-keyframes rotate{
	0%{
		opacity:0.6;
		-webkit-transform:  rotateX(-290deg);
	}
	100%{
		opacity:1;
		-webkit-transform:  rotateX(-330deg);
	}
}

#safari{
	animation: rotate 5s linear infinite alternate;
	-moz-animation: rotate 5s linear infinite alternate;
	-webkit-animation: rotate 5s linear infinite alternate;
}

Click here to see all demos in single page

Conclusion

Keyframe Animations and Transform hold tons of potential for making web pages impressively dynamic without a use of JavaScript and it’s incredibly easy to build with CSS .

If you like my work then please leave a comment below and let me know what you think.

Pages:
Leave a comment ?

32 Comments.

  1. Nice!

  2. Good..

  3. K JAYAKUMAR

    Excellent

  4. K JAYAKUMAR

    Good

  5. Good work muthu,Keep it up.
    Its very interesting ….

  6. Muthu, Really Nice..
    Excellent work..

  7. Sony Clare

    Very nice!

  8. Great work Muthu!

  9. Gaurav Kumar Gaur

    Nice Work Kumaran welldone.

  10. Very Nice :)

  11. Excellent Work Buddy…

  12. awesome………….thanx.. :smile:

  13. Cool effects Kumaran :!: . Thanks

  14. Gr8 job :wink:

  15. Excellent

  16. Varun Dublish

    Good Work.

  17. Michael Wenger

    Very cool!

  18. This is fantastic, great job.

  19. This is fantastic, great job. :roll:

  20. konto firmowe

    I love this idea!

  21. Christopher Lastname

    Wheeling Chrome doesn’t work in Chrome anymore…?

  22. Nice, good, great job, very cool, love this.

    Seriously, don’t you guys have anything better to say? Something constructive maybe?

  23. awesome

  24. Lincoln Ehnis

    Amazing and please keep up the enjoyable work.

  25. Very impressive.

  26. green smoke

    It’s really cool. Thank you for sharing.

  27. This is awsome :idea: :idea:

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackbacks and Pingbacks: