Html5css3 example Tutorial: html5 and css3 Implementation of small robot walking animation _ html5 tutorial tips-

Today we are going to bring you an html5 and css3 little robot walking animation. The figures in this example are painted in html5, And the animation effect is implemented in html5 and css3. For more information about html5 and css3 animations, see the Introduction. Today we will bring you an html5 and css3 little robot walking animation. The figures in this example are painted in html5, And the animation effect is implemented in html5 and css3. Let's take a look.

Implementation code.

　　Html code:

The Code is as follows:

X = "0px" y = "0px" viewbox = "0 0 458 337" enable-background = "new 0 0 458 337" xml: space = "preserve">























































Y1 = "180.6" x2 = "266.4" y2 = "181.7"/>
Y1 = "177.4" x2 = "288.4" y2 = "164.6"/>
R = "3.8"/>
R = "3.8"/>










Gradientunits = "userSpaceOnUse">

　　Css3 code:

The Code is as follows:

Html {
-Moz-box-sizing: border-box;
Box-sizing: border-box;
}
*, *: Before, *: after {
-Moz-box-sizing: inherit;
Box-sizing: inherit;
}

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 2 s linear infinite ;*/
}
# Head {
-Webkit-transform-origin: 235px 173px;
-Ms-transform-origin: 235px 173px;
Transform-origin: 235px 173px;
-Webkit-animation: head 2 s release-in-out infinite;
Animation: head 2 s memory-in-out infinite;
}

# Right-eyebrow, # left-eyebrow {
-Webkit-animation: eyebrows 10 s linear infinite;
Animation: eyebrows 10 s linear infinite;
}

# Left-leg {
-Webkit-transform-origin: 253px 225px;
-Ms-transform-origin: 253px 225px;
Transform-origin: 253px 225px;
-Webkit-animation: leftleg 2 s release-in-out infinite;
Animation: leftleg 2 s release-in-out infinite;
}

# Right-leg {
-Webkit-transform-origin: 225px 235px;
-Ms-transform-origin: 225px 235px;
Transform-origin: 225px 235px;
-Webkit-animation: rightleg 2 s release-in-out infinite;
Animation: rightleg 2 s release-in-out infinite;
}
# Left-arm {
-Webkit-transform-origin: 263px 186px;
-Ms-transform-origin: 263px 186px;
Transform-origin: 263px 186px;
-Webkit-animation: leftarm 2 s release-in-out infinite;
Animation: leftarm 2 s release-in-out infinite;
}

# Right-arm {
-Webkit-transform-origin: 209px 214px;
-Ms-transform-origin: 209px 214px;
Transform-origin: 209px 214px;
-Webkit-animation: rightarm 2 s release-in-out infinite;
Animation: rightarm 2 s memory-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.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.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 );
}
}