一、基本概念
在css3引入transition这个概念之前,css是没有时间轴的,也就是说,所有的动画效果,都是即时完成。
比如这里:
html代码:
<img src="dog.jpg">
css代码:
img{ width: 200px; height: 200px; } img:hover{ width: 400px; height: 400px; }
这里我鼠标移入图片上时,图片会立即变大,整个过程瞬间完成。
二、语法
transition: property duration timing-function delay;
2.1、property 和 duration
这俩个规定设置过渡效果的css属性的名称和持续的时间,property可以设置准确的值(width、height...)或者all,该值表示所有都将获得过渡效果。duration可以设置确切的秒数。
img{ width: 200px; height: 200px; transition: width 1s,height,1s; // transition: all 1s;也可实现 }
上面代码在后面加了过渡属性,现在整个变化过程是平滑的,持续1s时间
2.2、timing-function
这个属性规定了速度效果的速度曲线,有以下6个值:
- linear 匀速
- ease 慢速开始,然后变快,最后变慢 (默认值)
- ease-in 慢速开始
- ease-out 慢速结束
- ease-in-out 慢速开始和结束
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition: all 1s linear;
上面代码新增了timing-function属性,并赋值为linear,这样整个过渡,将会在一秒钟内匀速完成。
2.3、delay
这个属性定义过渡效果何时开始,可以设置具体的秒数来延迟执行。
transition: all 1s linear 1s;
上面代码新增了1秒钟的延迟,整个过渡一秒钟后,将会在一秒钟内匀速完成。
三、补充
3.1、简写方式,上面其实都是简写方式,也可以分解成:
img{ width: 200px; height: 200px; transition-property: all; transition-duration: 1s; transition-timing-function: linear; transition-delay: 1s; } img:hover{ width: 400px; height: 400px; }
3.2、前缀
ie10+、firefox、chrome、opera支持transition属性,safari浏览器需要添加 -webkit- 前缀。
3.3、支持属性
不是所有的css属性都支持过渡,完整的列表查看这里 http://oli.jp/2010/css-animatable-properties/,还有具体的效果 http://leaverou.github.io/animatable/。
3.4、注意点
transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态,比如,高度从0px到100px,但是如果从auto到100px,则不会产生动画效果,类似的效果还有display:none到dispaly:block,background: url(foo.jpg)到url(bar.jpg)等等。
3.5、局限性
- 需要事件触发,没法在网页加载时,自动发生
- transition是一次性的,不能重复发生,除非一再触发
- transition只能定义开始状态和结束状态,不能定义中间状态。