如何创建一个网页的工作的动画

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/。