有沒有一種方法可以使用JavaScript或CSS3爲汽車駕駛圖像製作動畫？爲了澄清，汽車圖像應該從背景動畫，圖像越來越小，看起來更遠，並逐漸變大，因爲它「驅動」前進到圖像的前景？圖像將是汽車的前部和看起來像這樣：使用JavaScript/CSS3進行橫幅廣告的車輛駕駛前進動畫

這個JavaScript動畫將在HTML5橫幅廣告，所以我希望能避免任何會增加的大小被利用我的交付成果很大。我一直在網上尋找類似的東西，似乎無法找到我希望實現的例子。任何想法都歡迎。

來源

2016-11-28 Liz

這肯定能在JavaScript中完成，但它會在CSS簡單得多。 –

@ScottMarcus我剛剛編輯OP來包含CSS3動畫！想到這一點。你有一個可以工作的CSS3動畫的例子嗎？謝謝。 – Liz

你不需要JavaScript，你可以使用CSS3動畫。例如，這會工作：

@keyframes drive { 
 
    from { 
 
    transform: scale(0.2); 
 
    } 
 
    to { 
 
    transform: scale(1); 
 
    } 
 
} 
 
.car { 
 
    animation: drive 3s cubic-bezier(0.02, 0.01, 0.21, 1) infinite; 
 
}

<img class="car" src="https://i.stack.imgur.com/oT3DY.png"/>

說明：

首先，我們定義一個drive動畫。它從一個CSS3轉換開始，將圖像縮放爲1/5大小，然後在動畫結束時縮放爲全尺寸。你可以使用任何CSS屬性，即使width，但transform: scale不強制頁面渲染，所以你的動畫更快。

然後，讓我們分解.car上的動畫屬性。

drive - 這部分是自explanitory，它告訴CSS使用的驅動器的關鍵幀
3s - 使動畫最後3秒
cubic-bezier(0.02, 0.01, 0.21, 1) - 設置動畫的運行曲線，使它隨着它的進一步縮小而變慢。
infinite導致動畫重複無限。

來源

2016-11-28 22:41:10

優秀。一旦它讓我接受這個答案。謝謝。 – Liz

@LizBanach謝謝！ –

這應該讓你開始：

img { 
 
     -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ 
 
     animation:mymove 3s infinite; 
 
     position: relative; 
 
    } 
 

 
    @keyframes mymove 
 
    { 
 
    0% {width:10%;} 
 
    10% {width:20%;} 
 
    20% {width:30%;} 
 
    30% {width:40%;} 
 
    40% {width:50%;} 
 
    50% {width:60%;} 
 
    60% {width:70%;} 
 
    70% {width:80%;} 
 
    80% {width:90%;} 
 
    90% {width:100%;} 
 
    100% {width:100%;}  
 
    }

<img src="https://i.stack.imgur.com/oT3DY.png">

來源

2016-11-28 22:43:10

使用JavaScript/CSS3進行橫幅廣告的車輛駕駛前進動畫

回答

說明：

相關問題