如何創建一個網頁的工作的動畫

Question

！我想知道如何讓下面提供類似鏈接的Web應用程序的工作的動畫：

https://about.canva.com/

動畫我我在談論的是「它擁有你需要的驚人設計的一切」部分。動畫和圖標在右側與動畫同步突出顯示。這怎麼可能？？

在此先感謝。

Answer 1

我認爲你可以通過使用CSS transition和opacity屬性來實現此目的。

使用JavaScript更改HTML元素（例如，div）的位置和不透明度。

有JS動畫庫，但是，自己縫合它將是一個很好的做法！

例如，如果我廣域網切換div元素，我可以這樣做：

function toggle() { 
    document.getElementById('div01').style.left = '100px'; 
    document.getElementById('div01').style.opacity = 0; 
} 

如果div01transition「0.1秒」，opacity和position將改變0.1秒。

你可以像你的例子那樣在div元素中放置很多其他元素，然後通過隱藏頂部的div元素將它們隱藏在一個元素中。

這裏是小提琴：https://jsfiddle.net/yfuLb9d0/2/。