css3中的animation的动画帧制作-卡通人物的走动效果
代码如下；
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation动画帧</title><style>div{width: 185px;height: 300px;margin-top: 100px;margin-left: 1300px;/* border: brown 1px solid; */background: url(images/charector.png) no-repeat ;/* background-size: 185px 300px; */animation: run 1.5s infinite step-end;}@keyframes run{0%{opacity: 1;background-position: 0px;transform: translateX(-185px);}16.66%{opacity: 0.9;background-position: -160px;transform: translateX(-370px);}33.33%{opacity: 0.8;background-position: -336px;transform: translateX(-555px);}49.98%{opacity: 0.6;background-position: -520px;transform: translateX(-740px);}66.64%{opacity: 0.4;background-position: -700px;transform: translateX(-925px);}88.3%{opacity: 0.2;background-position: -900px;transform: translateX(-1110px);}100%{background-position: -1100px;transform: translateX(-1295px);opacity: 0;}} </style></head><body><div class="box"></div></body></html>
