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

Question

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

我可以想到使用 CSS 来格式化页面元素。

但是我们怎样才能把一个元素放在页面的任意位置呢？我的意思是，不是按行。我们是否真的可以将浏览器窗口内的客户区视为 Paint Canvas ？

我是前端 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 定义元素的大小。

• 不透明度 可以设置动画以淡入或淡出元素。

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

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