將關鍵幀動畫合併爲一個

我有一幅圖像，我想「走過」一個div，然後在水平方向翻轉並以另一種方式回頭。我在這裏創建了一個codepen：https://codepen.io/jessiemele/pen/rGQWWE。 tinyWalk動畫在結束之前變得非常有彈性，在它回到開始之前，我假設它是形成擊中div頂部的圖像。我想知道是否有一種方法可以將這兩種動畫結合起來在圖像上運行它們，這樣我就不必在div上運行tinyWalk了。我的代碼是在這裏：將關鍵幀動畫合併爲一個

<div class="catapillarBox"> 
<img src="https://i.imgur.com/0XPhWfE.jpg" class="caterpillar" 
alt="caterpillar drawing" /> 
</div> 
</div> 
<div class="blueBox"> 
<h5>I'm your box</h5> 
</div>

CSS：

.blueBox { 
    background-color: #1d88eb; 
    width: 875px; 
    height: 400px; 
    margin-top: 125px; 
    padding-bottom: 70px; 
    margin-top: 150px; 
    z-index: 2; 
} 
img.caterpillar { 
    position: absolute; 
    top: 125px; 
    left:0; 
    -webkit-animation: walk 20s forwards infinite linear; 
    animation: walk 20s forwards infinite linear; 
    z-index: 3; 
} 
@keyframes walk{ 
    0% { left: 0; transform: rotateY(0deg);} 
    49% {transform: rotateY(0deg);} 
    50% {left: 700px; transform: rotateY(180deg);} 
    99% {transform: rotateY(180deg);} 
    100% {left: 0; transform: rotateY(0deg); 
}  
.catapillarBox { 
    width: 200px; 
    height: 100px; 
    -webkit-animation: tinywalk 500ms linear alternate infinite; 
    animation: tinywalk 500ms linear alternate infinite; 
} 
@keyframes tinywalk { 
    0%{ transform: rotate(0);} 
    25%{ transform: rotate(-1deg);} 
    50%{ transform: rotate(1deg);} 
    75%{ transform: rotate(-1deg);} 
    100%{ transform: rotate(0);} 
}

來源

2017-10-16 jessica mele

它看起來像是在爲我工作（你的codepen做你所描述的）。你解決了這個問題嗎？ –

嗨，傑克，我剛剛更新了我的問題。我得到了來回，並開始工作，但我看到很多反彈，而不是圖像的div上的tinyWalk，它是非常明顯的結束之前，它翻轉並回到起點。我想知道是否有一種方法可以將它們結合起來，並將動畫放在圖像上。 –

傑西卡，我創建了一個codepen here應該解決您的問題。它看起來像你的形象旋轉太激烈了，因爲你喜歡。我編輯它到0.2度旋轉。試試下面的CSS：

.blueBox { 
    background-color: #1d88eb; 
    width: 875px; 
    height: 400px; 
    margin-top: 125px; 
    padding-bottom: 70px; 
    margin-top: 150px; 
    z-index: 2; 
} 
.catapillarBox { 
    width: 200px; 
    height: 100px; 
    -webkit-animation: tinywalk 500ms linear alternate infinite; 
    animation: tinywalk 500ms linear alternate infinite; 
} 
@keyframes tinywalk { 
    0%{ transform: rotate(0);} 
    25%{ transform: rotate(-0.2deg);} 
    50%{ transform: rotate(0.2deg);} 
    75%{ transform: rotate(-0.2deg);} 
    100%{ transform: rotate(0);} 
} 
img.caterpillar { 
    position: absolute; 
    top: 125px; 
    left:0; 
    -webkit-animation: walk 20s forwards infinite linear; 
    animation: walk 20s forwards infinite linear; 
    z-index: 3; 
} 
@keyframes walk{ 
    0% { left: 0; transform: rotateY(0deg);} 
    49% {transform: rotateY(0deg);} 
    50% {left: 700px; transform: rotateY(180deg);} 
    99% {transform: rotateY(180deg);} 
    100% {left: 0; transform: rotateY(0deg); 
}

來源

2017-10-16 22:06:52

謝謝傑克，雖然這看起來更好，但我仍然看到最後的小動作動畫有點不同，有沒有辦法在圖像上同時走路和走路？ –

讓我看看它 –

傑西卡，以保持相同的解決方案（使用旋轉），只是讓循環越來越小，因爲你進一步走進你的步行動畫。再次檢查我的codepen。我已經[在這裏]更新了它（https://codepen.io/jackmoody/pen/gGQWWX）。你可以根據自己的喜好來改變度數旋轉，但是當你走得更遠時（走到50％），旋轉就會變小，然後當你從50％到100％旋轉時，旋轉變大。 –

將關鍵幀動畫合併爲一個

回答

相關問題