没有出现效果

TOYOT***

天盟七夕主题

.charector {
      position: absolute;
      left: 6%;
      top: 55%;
      width: 151px;
      height: 291px;
      background: url(http://img1.sycdn.imooc.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
}

.slowWalk {
   /*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
-webkit-animation-iteration-count: infinite;
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)

/* 普通慢走 */

@-webkit-keyframes person-slow {
      0% {
         background-position: -0px -291px;
      }
      25% {
         background-position: -602px -0px;
      }
      50% {
         background-position: -302px -291px;
      }
      75% {
         background-position: -151px -291px;
      }
      100% {
         background-position: -0px -291px;
      }
}

@-moz-keyframes person-slow {
      0% {
         background-position: -0px -291px;
      }
      25% {
         background-position: -602px -0px;
      }
      50% {
         background-position: -302px -291px;
      }
      75% {
         background-position: -151px -291px;
      }
      100% {
         background-position: -0px -291px;
      }
}

页面2
页面3

         点击开始动画

已有账号？

找人解决需求

没有出现效果

热门问答

TOYOT***

今日需求悬赏

今日问答求助

发布任务需求已有1031167位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端