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

回答

相關問題