Walk animation instance code with pure CSS3 characters

Today's share of the people is a pure CSS3 implementation of the character walking animation, in the absence of JavaScript, using the CSS3 technology to portray the character walking posture very lifelike. In fact, the principle of the implementation of the animation is relatively simple, the character walk when the state is divided into multiple pictures, and then use CSS3 animation properties of these images in series to form the character walking animation effect.

Online Demo Source Download

HTML code

<p id= "Canvas" > <p class= "Sky" > <p class= "cloud-1" ></p> <p class= "            Cloud-2 "></p> <p class=" cloud-3 "></p> <p class=" cloud-4 "></p> <p class= "cloud-5" ></p> <p class= "cloud-6" ></p> <p class= "cloud-7" &        gt;</p> <p class= "cloud-8" ></p> </p> <p class= "Horizon" ></p> <p class= "Ground" > <p class= "sign-best" ></p> <p class= "Sign-no-js" &GT;&L        t;/p> <p class= "Sign-lots-of-ps" ></p> <p class= "Sign-all-css" ></p> </p> <!--skeleton and shadow--<p class= "Shadow" ></p> <p class= "Me"            ;                    <p class= "Torso" > <p class= "left leg" > <p class= "left thigh" >    <p class= "left shin" > <p class= "left foot" > <                    P class= "left Toes" ></p> </p> </p>                    </p> </p> <!--left leg--<p class= "right leg" > <p class= "right thigh" > <p class= "right shin" > <p CLA Ss= "right foot" > <p class= "right toes" ></p> </                p> </p> </p> </p> <!--right Leg-- <p class= "left arm" > <p class= "left bicep" > <p clas                S= "left forearm" ></p> </p> </p> <!--left arm--- <p class= "right ARM "> <p class=" right bicep "> <p class=" right forearm "></p> </p> </p> <!--right arm--</p> <!--torso--&gt        ; </p> <!--me--<p class= "overlay" ></p> </p>

Basic CSS Code

#canvas {height:600px;    width:760px;    margin:0;    padding:0;    position:relative; Overflow:hidden;}    #canvas p {position:absolute;    -webkit-animation-iteration-count:infinite;    -moz-animation-iteration-count:infinite;    -ms-animation-iteration-count:infinite;    -o-animation-iteration-count:infinite;    Animation-iteration-count:infinite;    -webkit-animation-timing-function:linear;    -moz-animation-timing-function:linear;    -ms-animation-timing-function:linear;    -o-animation-timing-function:linear; Animation-timing-function:linear;} #canvas: Target P:not (. Overlay) {border:1px solid black;} #canvas: Target p.me p{Background:rgba (255, 255, 255, 0.25);}.    me {top:50px; left:350px;    -webkit-animation-name:me;    -moz-animation-name:me;    -ms-animation-name:me;    -o-animation-name:me; Animation-name:me;}.    Me,. Me p {background-repeat:no-repeat;    -webkit-animation-duration:1750ms;   -moz-animation-duration:1750ms; -ms-animation-duration:1750ms;    -o-animation-duration:1750ms; animation-duration:1750ms;}.    Torso {width:86px; height:275px; Background-image:url (images/me/torso.png);}.    arm {left:12px;    -webkit-transform-origin:20px 10px;    -moz-transform-origin:20px 10px;    -ms-transform-origin:20px 10px;    -o-transform-origin:20px 10px; transform-origin:20px 10px;}.    right.arm {top:93px;    -WEBKIT-ANIMATION-NAME:RIGHT-BICEP;    -MOZ-ANIMATION-NAME:RIGHT-BICEP;    -MS-ANIMATION-NAME:RIGHT-BICEP;    -O-ANIMATION-NAME:RIGHT-BICEP; Animation-name:right-bicep;}.    left.arm {top:87px;    -WEBKIT-ANIMATION-NAME:LEFT-BICEP;    -MOZ-ANIMATION-NAME:LEFT-BICEP;    -MS-ANIMATION-NAME:LEFT-BICEP;    -O-ANIMATION-NAME:LEFT-BICEP; Animation-name:left-bicep;}. bicep {height:124px; width:51px;}. RIGHT.BICEP {background-image:url (images/me/right-bicep.png);}. LEFT.BICEP {background-image:url (images/me/left-bicep.png);}. forearm {top:108px; left:14pX width:36px;    height:121px;    -WEBKIT-TRANSFORM-ORIGIN:3PX 7px;    -MOZ-TRANSFORM-ORIGIN:3PX 7px;    -MS-TRANSFORM-ORIGIN:3PX 7px;    -O-TRANSFORM-ORIGIN:3PX 7px; Transform-origin:3px 7px;}.    Right.forearm {background-image:url (images/me/right-forearm.png);    -webkit-animation-name:right-forearm;    -moz-animation-name:right-forearm;    -ms-animation-name:right-forearm;    -o-animation-name:right-forearm; Animation-name:right-forearm;}.    Left.forearm {background-image:url (images/me/left-forearm.png);    -webkit-animation-name:left-forearm;    -moz-animation-name:left-forearm;    -ms-animation-name:left-forearm;    -o-animation-name:left-forearm; Animation-name:left-forearm;}.    Leg {left:6px;    -webkit-transform-origin:30px 20px;    -moz-transform-origin:30px 20px;    -ms-transform-origin:30px 20px;    -o-transform-origin:30px 20px;    transform-origin:30px 20px;    -webkit-animation-name:thigh;    -moz-animation-name:thigh; -ms-animatIon-name:thigh;    -o-animation-name:thigh; Animation-name:thigh;}.    Right.leg {top:235px;    -webkit-animation-name:right-thigh;    -moz-animation-name:right-thigh;    -ms-animation-name:right-thigh;    -o-animation-name:right-thigh; Animation-name:right-thigh;}.    Left.leg {top:225px;    -webkit-animation-name:left-thigh;    -moz-animation-name:left-thigh;    -ms-animation-name:left-thigh;    -o-animation-name:left-thigh; Animation-name:left-thigh;}. Thigh {width:70px; height:145px;}. Left.thigh {background-image:url (images/me/left-thigh.png);}. Right.thigh {background-image:url (images/me/right-thigh.png);}.    Shin {top:115px; width:50px;    height:170px;    Background-image:url (images/me/shin.png);    -webkit-transform-origin:30px 25px;    -moz-transform-origin:30px 25px;    -ms-transform-origin:30px 25px;    -o-transform-origin:30px 25px; transform-origin:30px 25px;}.    Right.shin {-webkit-animation-name:right-shin; -moz-animatiOn-name:right-shin;    -ms-animation-name:right-shin;    -o-animation-name:right-shin; Animation-name:right-shin;}.    Left.shin {-webkit-animation-name:left-shin;    -moz-animation-name:left-shin;    -ms-animation-name:left-shin;    -o-animation-name:left-shin; Animation-name:left-shin;}.    foot {top:155px; left:2px; width:67px;    height:34px;    Background-image:url (images/me/foot.png);    -webkit-transform-origin:0 50%;    -moz-transform-origin:0 50%;    -ms-transform-origin:0 50%;    -o-transform-origin:0 50%; Transform-origin:0 50%;}.    right.foot {-webkit-animation-name:right-foot;    -moz-animation-name:right-foot;    -ms-animation-name:right-foot;    -o-animation-name:right-foot; Animation-name:right-foot;}.    left.foot {-webkit-animation-name:left-foot;    -moz-animation-name:left-foot;    -ms-animation-name:left-foot;    -o-animation-name:left-foot; Animation-name:left-foot;}.    toes {top:9px; left:66px; width:28px; Height:25px;    Background-image:url (images/me/toes.png);    -webkit-transform-origin:0% 100%;    -moz-transform-origin:0% 100%;    -ms-transform-origin:0% 100%;    -o-transform-origin:0% 100%; transform-origin:0% 100%;}.    right.toes {-webkit-animation-name:right-toes;    -moz-animation-name:right-toes;    -ms-animation-name:right-toes;    -o-animation-name:right-toes; Animation-name:right-toes;}.    left.toes {-webkit-animation-name:left-toes;    -moz-animation-name:left-toes;    -ms-animation-name:left-toes;    -o-animation-name:left-toes; Animation-name:left-toes;}.    Shadow {width:200px; height:70px; left:270px;    bottom:5px;    Background-image:url (images/misc/shadow.png);    -webkit-animation-name:shadow;    -moz-animation-name:shadow;    -ms-animation-name:shadow;    -o-animation-name:shadow; Animation-name:shadow;} /* Setting proper z-indexes So, limbs show up correctly */p.right.arm {z-index:1;} P.left.arm {z-index:-3;} P.arm > P. bicep > P.forearm {z-index:-1;} P.right.leg {z-index:-1;} P.left.leg {z-index:-2;} P.leg > P.thigh > P.shin {z-index:-1;}.    overlay {width:100%; height:100%; Background:url (images/misc/gradient-left.png) repeat-y top left, url (images/misc/gradient-right.png) Repea T-y top right;}.    Sky p {background-repeat:no-repeat;    -webkit-animation-name:prop-1200;    -moz-animation-name:prop-1200;    -ms-animation-name:prop-1200;    -o-animation-name:prop-1200; animation-name:prop-1200;}.    Cloud-1,. cloud-2 {width:82px; height:90px;    Background-image:url (images/clouds/1.png);    -webkit-animation-duration:120s;    -moz-animation-duration:120s;    -ms-animation-duration:120s;    -o-animation-duration:120s; animation-duration:120s;}.    Cloud-3,. cloud-4 {top:70px; width:159px;    height:90px;    Background-image:url (images/clouds/2.png);    -webkit-animation-duration:80s;    -moz-animation-duration:80s; -ms-animation-duration:80s;    -o-animation-duration:80s; animation-duration:80s;}.    Cloud-5,. cloud-6 {top:30px; width:287px;    height:62px;    Background-image:url (images/clouds/3.png);    -webkit-animation-duration:140s;    -moz-animation-duration:140s;    -ms-animation-duration:140s;    -o-animation-duration:140s; animation-duration:140s;}.    Cloud-7,. cloud-8 {top:100px; width:94px;    height:81px;    Background-image:url (images/clouds/4.png);    -webkit-animation-duration:90s;    -moz-animation-duration:90s;    -ms-animation-duration:90s;    -o-animation-duration:90s; animation-duration:90s;}. cloud-1 {left:0px;}. cloud-2 {left:1200px;}. cloud-3 {left:250px;}. cloud-4 {left:1450px;}. cloud-5 {left:500px;}. cloud-6 {left:1700px;}. cloud-7 {left:950px;}. cloud-8 {left:2150px;}.    Horizon {top:350px; width:1800px;    height:50px;    Background:url (images/misc/horizon.png) repeat-x;    -webkit-animation-name:prop-600; -moz-animation-name:prop-600;    -ms-animation-name:prop-600;    -o-animation-name:prop-600;    animation-name:prop-600;    -webkit-animation-duration:40s;    -moz-animation-duration:40s;    -ms-animation-duration:40s;    -o-animation-duration:40s; animation-duration:40s;}.    Ground p {background-repeat:no-repeat;    -webkit-animation-name:prop-2000;    -moz-animation-name:prop-2000;    -ms-animation-name:prop-2000;    -o-animation-name:prop-2000; animation-name:prop-2000;}.    sign-all-css {width:160px; height:188px; top:325px;    left:1600px;    Background-image:url (images/signs/all-css.png);    -webkit-animation-duration:35s;    -moz-animation-duration:35s;    -ms-animation-duration:35s;    -o-animation-duration:35s; animation-duration:35s;}.    sign-lots-of-ps {width:102px; height:120px; top:345px;    left:1150px;    Background-image:url (images/signs/lots-of-ps.png);    -webkit-animation-duration:56s;    -moz-animation-duration:56s;  -ms-animation-duration:56s;  -o-animation-duration:56s; animation-duration:56s;}.    Sign-no-js {width:65px; height:77px; top:348px;    left:1150px;    Background-image:url (images/signs/no-js.png);    -webkit-animation-duration:71s;    -moz-animation-duration:71s;    -ms-animation-duration:71s;    -o-animation-duration:71s; animation-duration:71s;}.    sign-best {width:43px; height:50px; top:350px;    left:1000px;    Background-image:url (images/signs/best.png);    -webkit-animation-duration:95s;    -moz-animation-duration:95s;    -ms-animation-duration:95s;    -o-animation-duration:95s; animation-duration:95s;}

CSS Animation related code

@-webkit-keyframes me {0% {-webkit-transform:rotate (5deg) translate (5px, 0px);}    25% {-webkit-transform:rotate (5deg) Translate ( -5px, -14px);}    50% {-webkit-transform:rotate (5deg) translate (5px, 0px);}    75% {-webkit-transform:rotate (5deg) Translate ( -5px, -14px);} 100% {-webkit-transform:rotate (5deg) translate (5px, 0px);}}    @-webkit-keyframes Right-bicep {0% {-webkit-transform:rotate (26deg);}    50% {-webkit-transform:rotate ( -20deg);} 100% {-webkit-transform:rotate (26deg);}}    @-webkit-keyframes Left-bicep {0% {-webkit-transform:rotate ( -20deg);}    50% {-webkit-transform:rotate (26deg);} 100% {-webkit-transform:rotate ( -20deg);}}    @-webkit-keyframes Right-forearm {0% {-webkit-transform:rotate ( -10deg);}    50% {-webkit-transform:rotate ( -45deg);} 100% {-webkit-transform:rotate ( -10deg);}}    @-webkit-keyframes Left-forearm {0% {-webkit-transform:rotate ( -45deg);} 50% {-webkit-transform:rotate( -10DEG); } 100% {-webkit-transform:rotate ( -45deg);}}    @-webkit-keyframes Right-thigh {0% {-webkit-transform:rotate ( -45deg);}    50% {-webkit-transform:rotate (10deg);} 100% {-webkit-transform:rotate ( -45deg);}}    @-webkit-keyframes Left-thigh {0% {-webkit-transform:rotate (10deg);}    50% {-webkit-transform:rotate ( -45deg);} 100% {-webkit-transform:rotate (10deg);}}    @-webkit-keyframes Right-shin {0% {-webkit-transform:rotate (30deg);}    25% {-webkit-transform:rotate (20deg);}    50% {-webkit-transform:rotate (20deg);}    75% {-webkit-transform:rotate (85deg);} 100% {-webkit-transform:rotate (30deg);}}    @-webkit-keyframes Left-shin {0% {-webkit-transform:rotate (20deg);}    25% {-webkit-transform:rotate (85deg);}    50% {-webkit-transform:rotate (30deg);}    75% {-webkit-transform:rotate (20deg);} 100% {-webkit-transform:rotate (20deg);}} @-webkit-keyframes Right-foot {0% {-webkit-transform:rotate ( -5deg);    } 25% {-webkit-transform:rotate ( -7deg);}    50% {-webkit-transform:rotate ( -16deg);}    75% {-webkit-transform:rotate ( -10deg);} 100% {-webkit-transform:rotate ( -5deg);}}    @-webkit-keyframes Left-foot {0% {-webkit-transform:rotate ( -16deg);}    25% {-webkit-transform:rotate ( -10deg);}    50% {-webkit-transform:rotate ( -5deg);}    75% {-webkit-transform:rotate ( -7deg);} 100% {-webkit-transform:rotate ( -16deg);}}    @-webkit-keyframes Right-toes {0% {-webkit-transform:rotate (0deg);}    25% {-webkit-transform:rotate ( -10deg);}    50% {-webkit-transform:rotate ( -10deg);}    75% {-webkit-transform:rotate ( -25deg);} 100% {-webkit-transform:rotate (0deg);}}    @-webkit-keyframes Left-toes {0% {-webkit-transform:rotate ( -10deg);}    25% {-webkit-transform:rotate ( -25deg);}    50% {-webkit-transform:rotate (0deg);}    75% {-webkit-transform:rotate ( -10deg);} 100% {-webkit-transform:rotate ( -10deg);}} @-webkit-keyframesShadow {0% {opacity:1;}    25% {opacity:0.75;}    50% {opacity:1;}    75% {opacity:0.75;} 100% {opacity:1;}}    @-webkit-keyframes prop-600 {0% {-webkit-transform:translatex (0px);} 100% {-webkit-transform:translatex ( -600px);}}    @-webkit-keyframes prop-1200 {0% {-webkit-transform:translatex (0px);} 100% {-webkit-transform:translatex ( -1200px);}}    @-webkit-keyframes prop-2000 {0% {-webkit-transform:translatex (0px);} 100% {-webkit-transform:translatex ( -2000px);}}