CSS3过渡

前言

在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:由慢到快又变慢。

css3过渡与动画个人案例——弹入窗口

css3过渡与动画个人案例——弹入窗口