CSS3过渡——transition

  让CSS属性值在必定时间内平滑过渡web

transition属性值

1.property

  检索/设置对象中参与过渡的属性动画

  可设置none(不设置过渡)、all(该对象全部属性设置过渡,默认值)、property(具体设置过渡的属性名称)spa

  为解决兼容性问题,须要在transition前加上-webkit-、-moz-、-o-等前缀code

2.duration

  设置过渡的时长对象

  默认为0,可设置秒(s)毫秒(ms)blog

3.timing-function

  设置过渡的类型ci

  经常使用值:linear(线性)、ease、ease-in(慢进快出)、ease-out(快进慢出)、ease-in-out(慢到快到慢,推荐使用it

  更复杂的须要调用贝塞尔曲线(相似于CSS动画里的timing-function)io

4.delay

  设置过渡的延时(即过渡以前要停多久再开始过渡)function

  默认为0,可设置秒(s)毫秒(ms)

5.transition简写

  顺序为property | duration | timing-function | delay,且不可随意调换

  其中duration属性为必须

 1 div{
 2     width:100px;height:100px;
 3     background:#abcdef;
 4     opacity:0;
 5     transition:opacity 5s ease-in-out;
 6 }
 7 div:hover{
 8     opacity:1;
 9     transition:opacity 5s ease-in-out;
10 }
相关文章
相关标签/搜索