使用CSS3動畫以不同的方向移動一定的50％

我有一個簡單的CSS動畫，在動畫從左上角到右下角的橫幅畫布移動圖像（300x250），但通過我需要50％開始向左下方移動，然後100％完成，並將其移回右下方，但是對於css動畫而言，並不確定如何執行此操作。有誰知道這是否可能？使用CSS3動畫以不同的方向移動一定的50％

做了一些圖在這裏：

而且例如：

.train-container { 
 
\t position: relative; 
 
} 
 

 
.train { 
 
\t position: absolute; 
 
\t top: -350px; 
 
\t left: -250px; 
 
} 
 

 
@keyframes moveTrain { 
 
\t 0% { 
 
\t \t transform: translate(-185px,-159px); 
 
\t } 
 
    \t 100% { 
 
    \t \t transform: translate(300px,250px); 
 
    \t } 
 
} 
 

 
.train-container { 
 
\t animation-duration: 30s; 
 
\t animation-fill-mode: forwards; 
 
\t backface-visibility: hidden; 
 
\t animation-name: moveTrain; 
 
\t position: absolute; 
 
} 
 

 
.train-container { 
 
\t .train { 
 
\t \t transform: scale(0.65); 
 
\t } 
 
}

來源

2015-11-09 James Brandon

你一定要明白，你畫的路徑有4個點，你所描述的動畫只有3個權？也許你的意思是100％ - 66.66％ - 33.33％ - 0 –

我並不完全明白這裏的問題是什麼，請將橫幅移動到之字形，然後移回或留在任何位置？ – nikoss

是或多或少在zigg zagg議案中，很難解釋lol –

當你的動畫工作，到目前爲止，所有你需要做的是添加更多關鍵幀。

現在您擁有0％和100％的關鍵幀。再添加2個框架，其中33％和66％在兩者之間並設置其位置。

@keyframes moveTrain { 
    0% { 
     transform: translate(-185px,-159px); 
    } 
    33% { 
     transform: translate(VALUE, VALUE); 
    } 
    66% { 
     transform: translate(VALUE, VALUE); 
    } 
    100% { 
     transform: translate(300px,250px); 
    } 
}

只需在添加的關鍵幀中指定想要的位置值。

您也可以使用其他值的關鍵幀超過33％和66％，而且你還可以添加更多的

來源

2015-11-09 14:31:54 Karkan

你知道我是如何制定出我需要的位置的？我嘗試了0,0和150px，125px對此感到抱歉抱歉。 –

你可以猜測位置。此外，我會建議從位置0,0開始或結束位置0,0。括號中的第一個值是X位置，第二個Y位置。更高的X-pos將圖像移動到右側，更高的Y-pos將其移下。你可以嘗試這種方式：1.（0px，0px）; 2.（150px，50px）; 3.（0px，100px）; 4.（150px，150px）;這應該或多或少是你想要實現的。 maxbe有一點修改 – Karkan

使用CSS3動畫以不同的方向移動一定的50％

回答

相關問題