本文作者html5tricks，转载请注明出处

还记得之前给大家分享的这款CSS3人物行走动画吗？动画效果确实棒极了。今天我们再分享一款基于CSS3的人物跑步动画，跑步动画非常简单，跑步的人物仅仅用一些线条勾勒出来，通过这些线条的弯曲和移动形成跑步的动画效果。

下面我们来一起分析一下实现这个跑步动画的代码和过程，代码主要由HTML和CSS组成。

HTML代码：

HTML代码非常简单，从class的定义上可以看出，这里主要是用线条勾勒出一个人物的形象。当然如何让这些线条形成连贯的跑步动作，就需要CSS3来实现了。

CSS代码：

.container {

height: 300px;

width: 300px;

margin:50px;

}

.person {

position: absolute;

height: 75px;

width: 0;

color: #fff;

left: 150px;

top: 159px;

transform-origin: 50% 50% 0px;

-webkit-animation: sprint 2s infinite ease-in;

}

.person .head:before {

content: "";

position: absolute;

top: 0px;

left: -6px;

height: 2.7px;

width: 42px;

border-radius: 20%;

border: 4px solid white;

background-color: #fff;

transform-origin: 50% 100% 0px;

z-index: 90;

}

.person .head {

position: absolute;

top: -30px;

left: -6px;

height: 30px;

width: 30px;

border-radius: 50%;

border: 4px solid white;

transform-origin: 50% 100% 0px;

z-index: 90;

-webkit-animation: bob 2s infinite alternate;

}

.person .head:after {

content: "";

position: absolute;

top: -12px;

left: 9px;

height: 12px;

width: 15px;

border-radius: 30%;

border: 4px solid white;

background-color: #fff;

z-index: 90;

}

.person .torso {

position: absolute;

height: 60px;

width: 0;

border-left: 2px solid white;

left: 0px;

top: 15px;

z-index: 90;

}

.person .part {

position: absolute;

left: 0;

top: 75px;

z-index: 90;

}

.person .part.arm {

position: absolute;

border-left: 3px solid white;

border-bottom: 3px solid white;

height: 45px;

width: 39px;

top: 15px;

right: 300px;

transform-origin: 0% 0% 0px;

-webkit-animation: pump 1s infinite ease-in-out;

}

.person .part.arm.one {

transform: rotate3d(0, 0, 1, -90deg);

}

.person .part.arm.two {

transform: rotate3d(0, 0, 1, -90deg);

animation-delay: .5s;

}

.person .part.leg {

height: 57px;

width: 60px;

border-right: 3px solid white;

border-top: 3px solid white;

-webkit-animation: run 1s infinite ease-in;

transform-origin: 0% 0% 0px;

}

.person .part.leg.one {

transform: rotate3d(0, 0, 1, 90deg);

}

.person .part.leg.two {

transform: rotate3d(0, 0, 1, 80deg);

animation-delay: .5s;

}

.person .part .foot {

position: absolute;

top: 90px;

left: 0;

width: 3px;

height: 3px;

background-color: #ffffff;

z-index: 900;

border: 3px solid red;

}

@keyframes run {

0% {

transform: rotate3d(0, 0, 1, -5deg);

}

50% {

transform: rotate3d(0, 0, 1, 150deg);

}

100% {

transform: rotate3d(0, 0, 1, -5deg);

}

}

@keyframes bob {

0% {

transform: rotate3d(0, 0, 1, 5deg);

}

25% {

transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);

}

50% {

transform: rotate3d(0, 0, 1, 5deg);

}

75% {

transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);

}

100% {

transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);

}

}

@keyframes pump {

0% {

transform: rotate3d(0, 0, 1, 80deg);

}

50% {

transform: rotate3d(0, 0, 1, -70deg);

}

100% {

transform: rotate3d(0, 0, 1, 80deg);

}

}

@keyframes spin {

0% {

transform: rotate3d(0, 0, 1, -180deg);

}

25% {

transform: rotate3d(0, 0, 1, -100deg);

}

75% {

transform: rotate3d(0, 0, 1, 100deg);

}

100% {

transform: rotate3d(0, 0, 1, 180deg);

}

}

@keyframes sprint {

0% {

transform-origin: 50% 50% 0px;

transform: translate(-500px, 0px);

}

100% {

transform: translate(0px, 0px);

transform-origin: 50% 50% 0px;

transform: translate(500px, 0px);

}

}

这里主要定义了5组CSS3动画，分别是头、双手、双脚的运动动画描述，里面的这些参数大家可以自己修改试试。这样一款CSS3人物跑步动画就完成了。