Today we will introduce how to use css3 to complete google doodle animation. When you click the [Start] button on the demo page, the riders and horses on the page will move. http://demo.CuoXIn.com/js/2012/googleCSS3/">css3/
One thing to emphasize here is that ie does not support the animation attributes of css3, and I complain about the evil ie again. But we can't use this as a reason not to embrace css3.
Let's look at the html code first.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div>
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button" id="play_label"></label>
<input type="checkbox" id="play_button" name="play_button"/>
<span id="play_image">
<img src="img/muybridge12-hp-p.jpg"/>
</span>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Below are some css.
*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#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;
}
This part of the code is not too difficult, so I won't explain it in detail. Readers who are not very solid in css may wonder how the [Start] button is positioned. You can read the position attribute yourself to understand the specific function of absolute.
Below is the page effect completed by the above html and css codes.
pic
Let’s introduce how to produce animation effects. We first need to define the keyframe, which specifies the effect of the animation at different stages. You can learn more at http://www.w3schools.com/css3/css3_animations.asp.
We created a keyframe called horse-ride, and we need to prefix -webkit- or -moz- for chrome and firefox. 0% and 100% start and end the code respectively. You can add new cases as needed, such as the animation effect at 50%.
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
Next, we will add the animation effect of css3 for horse.
#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;
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);
}
Here we first introduce: checked and ~, :checked are pseudo-classes, referring to the css effect when #play_button is selected, and ~ refers to the brother node of #play_button.
Next, we introduce the css attributes related to .horse. In animation, we use 4 values, representing: keyframe (horse-ride we defined above), animation interval time, animation effect and execution times. Then we set the animation delay time through animation-delay. Set the transition animation of the background by combining transition and background-position.
Finally, we add animation effects to the [Start] button.
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
You can try to develop it yourself.
demo download address: google-doodle-animation-in-css3-without-javascript.zip Today we will introduce how to use css3 to complete google doodle animation. When you click the [Start] button on the demo page, the riders and horses in the page will move, http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html.
One thing to emphasize here is that ie does not support the animation attributes of css3, and I complain about the evil ie again. But we can't use this as a reason not to embrace css3.
Let's look at the html code first.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id="logo">
<div>
<img src="img/muybridge12-hp-v.png"/>
</div>
<label for="play_button" id="play_label"></label>
<input type="checkbox" id="play_button" name="play_button"/>
<span id="play_image">
<img src="img/muybridge12-hp-p.jpg"/>
</span>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Below are some css.
*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background: url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#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;
}
This part of the code is not too difficult, so I won't explain it in detail. Readers who are not very solid in css may wonder how the [Start] button is positioned. You can read the position attribute yourself to understand the specific function of absolute.
Below is the page effect completed by the above html and css codes.
pic
Let’s introduce how to produce animation effects. We first need to define the keyframe, which specifies the effect of the animation at different stages. You can learn more at http://www.w3schools.com/css3/css3_animations.asp.
We created a keyframe called horse-ride, and we need to prefix -webkit- or -moz- for chrome and firefox. 0% and 100% start and end the code respectively. You can add new cases as needed, such as the animation effect at 50%.
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
% {background-position: 0 0;}
% {background-position: -804px 0;}
}
Next, we will add the animation effect of css3 for horse.
#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;
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);
}
Here we first introduce: checked and ~, :checked are pseudo-classes, referring to the css effect when #play_button is selected, and ~ refers to the brother node of #play_button.
Next, we introduce the css attributes related to .horse. In animation, we use 4 values, representing: keyframe (horse-ride we defined above), animation interval time, animation effect and execution times. Then we set the animation delay time through animation-delay. Set the transition animation of the background by combining transition and background-position.
Finally, we add animation effects to the [Start] button.
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
You can try to develop it yourself.
demo download address: http://xiazai.CuoXIn.com/201212/yuanma/googlecss3_jb51.rar