CSS3 动画效果
文章目录
作用
用来定义样式变化的过渡效果, 在某些情况下（移动端），可以代替JavaScript代码来实现动画效果。
transition属性是一个简写属性，用于设置四个过渡属性：
1. transition-property
规定设置过渡效果的 CSS 属性的名称, 默认值为all, 表示所有属性，也可以单独设置某个css属性。
2. transition-duration
过渡时间，值以秒或毫秒计。
3. transition-timing-function
过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
默认值为linear。常见的有以下值：
linear 匀速
ease 慢速开始，然后变快，然后慢速结束。
ease-in 以慢速开始
ease-out 以慢速结束
ease-in-out 以慢速开始和结束的过渡效果
4. transition-delay
过渡效果的延迟，值以秒或毫秒计。默认为0。如果为正值，则表示延迟执行过渡效果；如果为负值（如-0.1s)，则会从过渡效果的执行0.1s的状态为初始状态开始执行过渡效果。
兼容性
Internet Explorer 10、Firefox、Opera 和 Chrome等现代浏览器 支持 transition 属性。 Safari 支持替代的 -webkit-transition 属性。