前言
在css3之前的页面开发都较为“笨重”，我们需要一些动画的效果，来使页面变得平滑，就需要繁杂的js实现。在css3之后，实现这些动画效果可以用css的特定属性实现，从而变得简便很多。
上一篇文章中我们对CSS3动画有一定的了解
CSS3动画
CSS3过渡与动画的区别
过渡的特点：过渡必须要有触发条件，过渡有且只有两个状态
动画的特点：动画不需要触发条件，动画可以有多个状态，用百分比表示，动画可以无限循环
css3过渡的浏览器兼容性
Internet Explorer 10、Firefox 以及 Opera 支持 transition 属性
Safari 6.1 和 Chrome 26.0 及以上支持 transition 属性
Safari 3.1 和 Chrome 4.0 及以上支持替代的 -webkit-transition 属性
过渡属性
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
transition-timing-function 速度曲线
- linear:线性过度。
- ease:平滑过度。
- ease-in:由慢到快。
- ease-out:由快到慢。
- ease-in-out:由慢到快又变慢。
网友评论