CSS3动画效果transition

CSS3过渡介绍(逆战班总结)

css3的transition可以让css的属性值在一定时间区间内平滑过渡，在鼠标单击、获得焦点、被点击或元素任何改变中触发。通过css3 transition可以在不使用Flash动画或javaScript的情况下，为元素从一种样式变换为另一种样式时添加效果，使很生硬的效果变得更柔和，更多样。
一、浏览器支持
IE10、Firefox、Chrome以及Opera支持transition属性。
Safari需要前缀 -webkit-
需注意IE9及以上不支持transition属性

二、实现的效果内容
要实现效果需注意两个内容。
1.需要变化的样式属性
2.变化的时间

三、说明
transition
transtion:简写属性，可以设置四个过渡属性
transition-property:规定参与过渡的CSS属性。
transition-duration:定义过渡效果发费的时间。默认0s。
transition-timing-function:过渡效果的时间曲线。默认为“ease”。
transition-delay:设置效果延迟时间。

transition-property属性
【语法】transition-property:all/none/多个属性,隔开；
【说明】all所有属性，none没有属性会获得效果
【注意】单独设置此属性无效，需同时设置transition-duration属性才能产生效果
【例】鼠标移到div上宽度与背景颜色2s改变

效果图
当鼠标移到div上，宽度与背景颜色渐变，高度立即变化

transition-duration
【语法】transition-duration:time；
【说明】效果持续时间，时间单位为ms（毫秒），s（秒）
【注意】单独设置此属性无效，需同时设置transition-duration属性才能产生效果

transition-timing-function
【语法】语法:transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)；
【说明】
默认属性ease
linear:相同速度，匀速的过渡效果

ease: 先慢速，再加速，慢速结束的过渡效果

ease-in:慢速开始逐渐加速的过渡效果