google doodle animation

Written by @kerixa 23 February 2014

It is the power of new web technologies. You can see the google doodle animation only by css3, no javascript or additional resources.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;}

#logo {position: relative;}

.horse {
	width: 469px; height: 54px;
	background: url(http://www.google.co.in/logos/2012/muybridge12-hp-f.jpg);
}

.frame {position: absolute; left: 0; top: 0; z-index: 1;}

/*Clicking the label will select the checkbox which will be used to
trigger the animation of the horses*/

#play_button:checked ~ .horse {
	-webkit-animation: horse-ride 0.5s steps(12, end) infinite;
	-webkit-animation-delay: 2.5s;
	-moz-animation: horse-ride 0.5s steps(12, end) infinite;
	-moz-animation-delay: 2.5s;
	/*Lets add a pre-anim which will start slowly and merge into the fast animation*/
	background-position: -2412px 0;
	-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
	-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

/*Hide the play image*/
#play_button:checked ~ #play_image img{
	left: -68px;
	-webkit-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
}

/*804px is the width of the image with 12 horse frames
steps are used in the animation to have the best animation effect
it will position the horse frames accurately in the boxes instead of 
tweening it px by px all the way through*/
@-webkit-keyframes horse-ride {
	0% {background-position: 0 0;}
	100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
	0% {background-position: 0 0;}
	100% {background-position: -804px 0;}
}

#play_button {display: none;}
#play_label {
	width: 67px; height: 54px;
	display: block;
	position: absolute; left: 201px; top: 54px; z-index: 2;
}
#play_image {position: absolute; left: 201px; top: 54px; z-index: 0;
	overflow: hidden; width: 68px; height: 55px;
}
#play_image img {position: absolute; left: 0; top: 0;}
</style>
</head>
<body>
<div id="logo">
	<div class="frame">
		<img src="https://www.google.com/logos/2012/muybridge12-hp-v.png" />
	</div>
	
	<!-- The play button now -->
	<label for="play_button" id="play_label"></label>
	<input type="checkbox" id="play_button" name="play_button" />
	
	<!-- The image for the play button 
	The sibling selector works in the forward direction only.-->
	<span id="play_image">
		<img src="http://www.google.co.in/logos/2012/muybridge12-hp-p.jpg" />
	</span>
	
	<div class="horse"></div>
	<div class="horse"></div>
	<div class="horse"></div>
</div>
<div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2