01-过渡与动画
第13章 过渡与动画
我们认为网页分为三个层次:内容(HTML)、表现(CSS)和行为(JavaScript),通常都认为这些分层应该全部保持绝对的隔离——我们不会在内容层中使用表现规则或行为规则(换句话说,在标记中没有CSS或内联的JavaScript)。然而,这种隔离并不像看着那样能够非常清楚地分割——首先,CSS总是会有一些行为上的内容(:hover伪类就是一个最好的例子)。
表现和行为之间的界限是模糊的,尤其是在WebKit开发人员引入两个新的行为模块后就更为突出了,这两个模块已经被采纳为CSS3组件,它们分别是过渡(Transitions)与动画(Animations)。这两个模块即便是在JavaScript不可用的情况下,也允许对元素属性使用动画,把运动添加到静态页面上。
有些人对于过渡与动画模块是否应该包含在CSS当中仍然存在争议,因为它们肯定已经涉及到行为层的范畴。但是,由于W3C已经决定对它们是否作为CSS3的“官方”内容进行讨论,我们不再需要对它们的是非再进行辩论——相反,我们只要用得开心就行了!
过渡与动画之间的差异是,前者是隐式的,而后者是公开声明的。这意味着过渡只有在它们所应用的属性的值被改变的时候才会发挥效果,而动画则会在应用到元素的时候显式地执行。
我们先看看过渡,开始这一章的学习,因为它是这这两个模块中相对简单的一个。不过,二者在语法上有许多共同点,所以从一个模块中学习到的东西很多都可以直接应用到另一个模块上。