网页动画背后的技术是什么？

Question

虽然我们可以通过 jQuery 等各种 Javascript 库来实现梦幻般的动画。我想知道动画背后的技术是什么？

我可以考虑使用 CSS 来格式化页面元素。

但是我们怎样才能在页面的任意位置放置一个元素呢？我的意思是，不是按线。我们真的可以将浏览器窗口中的客户区视为画布吗？

我对前端 Web 开发完全陌生，我希望我说清楚了。感谢您回答这个初级问题。

Answer 1

jQuery 方式（也是唯一的跨浏览器方式）动画是设置一些 CSS 属性，稍等，更新这些属性，稍等，更新这些属性...

e.style.position = "absolute";
time_start = Date.now();
time_end = time_start + 10000;

(function tick(){
  now = Date.now() - time_start;
  if(now > time_end) now = time_end;
  e.style.top = now * speed + top_start;
  if(now < time_end) setTimeout(tick, 13);
}();

您感兴趣的 CSS 属性是：

• position: absolute 可让您将元素定位到任意位置。
• display: block 或 display: inline-block 让元素具有 width 和 height
• top、left、bottom、right 定义元素位置，如果其position 是absolute 或relative。 left 优先于 right，top 优先于 bottom。
• width 和 height 定义元素的大小。

• opacity 可以动画淡入或淡出元素。

• padding、border-width、margin及其各自的组件都可以动画化。

您还可以为颜色设置动画：border-color、color、background。