Question

我会尽量保持尽可能简单，不要太模糊。基本上，我正在制作一个简单的Web应用程序，并且我已多次尝试使我的character.gif在按下按钮后跳转，但我正在努力应用物流来获取对象的当前位置，增加其％从顶部和右边，然后减少它以给出“跳跃”效果。任何指针都会受到极大的赞赏。（我没有包含按钮的代码，因为它只是将.character类的动画更改为跳转）。感谢您的回复！

 .character {
      background-image: url('run.gif');
      background-size: 100px 70px;
      width: 100px;
      height: 70px;
      animation-name: characterMoving;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      position: absolute;
      top: 80%;
      left: -1%;


    }

    @keyframes characterMoving {
      0% {
        left: -128px
      }
      100% {
        left: 100vw;
      }
    }

//do jumping animation here
@keyframes characterJumping{
  0% {

  }
  50% {

  }
  100% {

  }

Answer 1

我没有深入研究你的代码，但希望这能满足你的目的。

＆＃13;

.character {
      background-image: url('https://cdn2.iconfinder.com/data/icons/faceavatars/PNG/D04.png');
      background-size: 100px 70px;
      width: 100px;
      height: 70px;
      animation-name: jump;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      position: absolute;
      top: 20%;
      left: -1%;


    }


@keyframes jump {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.jump {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

＆＃13;

<div class="character"></div>

＆＃13;

Answer 2

试试这个：

 .character {
    -webkit-animation: jump 1.5s ease 0s infinite normal ;
    animation: jump 1.5s ease 0s infinite normal ;
 }

@-webkit-keyframes jump {
  0%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40%{
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60%{
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
 }
}

CSS跳跃动画

2 个答案: