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

Question

，尽管我们可以通过诸如jQuery等各种JavaScript库获得出色的动画。我想知道动画背后的技术是什么？

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

但是我们如何将元素放在页面的任意位置上？我的意思是，不是线条。我们可以将浏览器窗口中的客户区域视为油漆帆布吗？

我是前端网络开发的新手，希望我清楚自己。并感谢您回答这个初级问题。

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。