Home > Article > Web Front-end > html5 css3 example tutorial A small robot walking animation implemented in html5 and css3_html5 tutorial skills
I have introduced many animations implemented by html5 and css3 before. Today I want to bring you a walking animation of a small robot implemented by html5 and css3. The characters in this example are drawn with HTML5, and the animation effects are achieved with HTML5 and CSS3. Let’s take a look at the renderings.
Implementation code.
html code:
css3代码:
html,body {
height:100%;
margin: 0;
font: 40px/40px "Helvetica Neue";
font-weight: 900;
color: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
svg {
width: 100%;
height: 100%;
}
#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px;
/*animation: pulse 2s linear infinite;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
-webkit-animation: head 2s ease-in-out infinite;
animation: head 2s ease-in-out infinite;
}
#right-eyebrow, #left-eyebrow {
-webkit-animation: eyebrows 10s linear infinite;
animation: eyebrows 10s linear infinite;
}
#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
-webkit-animation: leftleg 2s ease-in-out infinite;
animation: leftleg 2s ease-in-out infinite;
}
#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: rightleg 2s ease-in-out infinite;
animation: rightleg 2s ease-in-out infinite;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
-webkit-animation: leftarm 2s ease-in-out infinite;
animation: leftarm 2s ease-in-out infinite;
}
#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animation: rightarm 2s ease-in-out infinite;
animation: rightarm 2s ease-in-out infinite;
}
#hair {
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg); /* izza not workingz! */
}
@-webkit-keyframes leftleg {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes leftleg {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@keyframes rightleg {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@-webkit-keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes leftarm {
0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}
@keyframes leftarm {
0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
}
@-webkit-keyframes head {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes head {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes pulse {
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes eyebrows {
0%{
}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@keyframes eyebrows {
0%{
}
98%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
99%{
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
100%{
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}