CSS跳跃动画

我会尽我所能让它尽可能简单，不要太模糊。基本上，我正在制作一个简单的网络应用程序，并且我试图多次使我的character.gif在按下按钮后跳转，但我很努力地将物流应用于获取对象当前位置，增加其％从顶部和右侧开始，然后降低它以产生“跳跃”效果。任何指针将非常感激。（我没有包含该按钮的代码，因为它所做的只是将.character类的动画更改为跳转）。感谢任何和所有的回应！CSS跳跃动画

.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% { 

    }

来源

2016-05-07 Jordy

试试这个：

.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); 
} 
}

来源

2016-05-07 11:10:39

我不跳水多到你的代码，但希望这将成为你的目的。

.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; 
 
}

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

来源

2016-05-07 11:14:05

我试图实现您的解决方案到我的代码，这就带来了一个后续问题。我稍微调整了你的代码，让动画让玩家跳到右边（这样他们就可以跳过障碍物）。由此可以更新对象的位置，而不是将其返回到默认的动画位置（如果不够清楚，动画将从屏幕左侧开始，以5％的屏幕宽度开始，并且然后在动画完成后，将它移动到屏幕宽度的10％，当我希望它保持10％更新时，它将恢复到原来的5％） – Jordy

此外，是否有可能获得精灵当前位置，以及让它从这个位置执行动画（因为默认的精灵会穿过屏幕，而onTap，我想要启动跳跃动作。感谢任何反馈 – Jordy

回答

相关问题