如何让网页动起来，实现酷炫动画和提升互动体验？

网页动起来炫酷到飞起！

哎呀， 你说这年头，网页不动就跟老古董一样，点进去只会让人打哈欠——真的，谁还能忍受那种死板的静止？于是 我决定把这篇文章写得像一杯摇晃的奶茶，里面混进点儿糖、点儿盐，还有一点莫名其妙的辣椒粉，让你在阅读时也能感受到刺激。

先说说为什么动画能让人心跳加速

没眼看。 先说说 你得明白，人在看到动感的时候，大脑会自动分泌多巴胺——这可是让人上瘾的化学物质啊！所以当你的页面里出现闪闪发光的按钮、滑稽跳舞的文字，那些访客根本停不下来。动起来不只是为了好看，更是为了把用户粘在你的网站上，让他们忍不住多点几次刷新。

请大家务必... 不过别忘了 太炫也会适得其反——如果动画卡顿、颜色刺眼，那可就是给用户送上“一键返回”的快递。于是 这里奉上几条“拙劣”但实用的小技巧：

• 使用 CSS3 的 @keyframes 简单实现淡入淡出；
• 配合 requestAnimationFrame 让 JavaScript 动画更流畅；
• 别忘了给老旧浏览器准备 -webkit- 前缀，免得他们哭着跑去找别人的网站。