CSS动画与Windows 8合约：从基础到优化
1. HTML独立动画示例
在HTML独立动画示例中，场景1通过滑块占用UI线程的时间（即阻塞该线程），展示了独立动画与依赖动画的区别。当你移动滑块增加UI线程的工作量时，顶部的红色球移动变得不流畅，而底部的绿色球则始终平滑移动。
这里令人费解的是，两个球使用了相同的CSS样式规则，几乎所有方面都相同。红色球在UI线程有额外工作时移动不流畅的原因在于，css/scenario1.css中红色球的z-index: -1;样式（并且没有position: static来否定z-index）。要使动画独立运行，它们必须不受阻碍，这涉及到应用程序宿主的HTML/CSS渲染引擎中布局的组合方式。
独立动画仅限于影响元素的transform和opacity属性。如果对影响布局的属性（如width或left）进行动画处理，动画将作为依赖动画运行。此外，系统缺乏GPU、GPU负载过多或元素过大等因素也会使一些动画转变为依赖动画。因此，有目的地使用动画很重要，过度使用会在低端设备上产生糟糕的用户体验。
该示例的其他场景允许你通过在各种控件中设置值，然后运行动画来使用CSS过渡和动画。场景2和3分别处理2D和3D变换的CSS过渡，场景5和6则使用CSS动画实现类似效果。在这些情况下，必要的样式直接在JavaScript中设置，而不是使用声明式CSS，所以要在.js文件中查看详细信息。
)
