- 原文地址:css animation 101 #transitions
- 原文作者:Donovan Hutchinson
- 译者:JobbyM
过渡
让我们看看transition
属性。
浏览器过去简单得多。不久前,他们无法渲染图像,只能处理少数的字体。然后CSS 给了我们关于网页外观和感觉的能力。
浏览器中的动画并不新鲜。Flash、Canvas和其他JavaScript 选项为我们提供了动画的方法,但最近CSS 已经成为一个可行的选项。
过渡
CSS允许我们使用transition
属性在浏览器中控制动画的一种方式。在浏览器术语中,过渡是从一个状态到另一个状态的动画。

过渡:A 到B
当我们在元素上使用过渡时,我们告诉浏览器我们希望它插入或改变计算状态之间的变化。

动画过渡: A 到B(http://codepen.io/donovanh/pen/RNdxqw)
例如,我们可以在悬停时应用过渡更改元素的样式,浏览器将在元素的开始样式和新样式之间创建平滑动画。

动画按钮(http://codepen.io/donovanh/pen/MYQdZd)
过渡属性
当我们在元素上使用过渡时,有各种属性可以改变过渡的工作方式。我们可以让它变慢或变快,延迟它,甚至使用计时功能来控制变化率。下周我们将深入研究这些,但这有一个很好的例子,说明当组合几个过渡时会发生什么:

组合过渡(http://in-ni.com/)
另一个组合过渡的例子:

更多过渡(http://codepen.io/suez/pen/XJGOyL)
总结
过渡是从一种状态到另一种状态的变化。例如,悬停在元素上时,其样式可能会更改。过渡允许更改成为平滑动画。
家庭作业
你的工作环境怎么样?看看代码,在css 中查找transition
属性怎么样?你能看到它在做什么吗?
下次浏览网页时,请在浏览网页时查找过渡示例。查找有趣的更改,例如将新元素添加到页面或将鼠标悬停在按钮上时。一旦你开始寻找,你会发现网络充满了微妙的动画。
下一节:概述动画属性及其与过渡的区别。