过渡：transition
transition：transition-PRoperty/duration/timing-function/delay的缩写。 transition： <'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'> [, ... ];
transition-property：变换的属性名。 none、all、一个或多个<property>(逗号分隔)。
transition-duration：持续时间。单位s或ms。 <time>默认为0。无过渡效果。
transition-timing-function：过渡效果的速度曲线。 linear：匀速，等于cubic-bezier(0,0,1,1) ease：慢快慢，等于cubic-bezier(0.25,0.1,0.25,1) ease-in：以慢开始，等于cubic-bezier(0.25,0.1,0.25,1) ease-out：以慢结束，等于cubic-bezier(0,0,0.25,1) ease-in-out：以慢开始和结束，等于cubic-bezier(0.42,0,0.58,1) cubiz-bezier(n,n,n,n)：【三次贝塞尔】在cubiz-bezier函数中定义自己的值，0~1。
transition-delay：指定开始时间。默认0。 逗号分隔多个属性的延迟时间。 -moz-transition: color0.3sease-out2s;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>过度</title><style type="text/css"> /*案例*/ .t{ width:200px; height:300px; background:blue; transition:width 2s, height 2s; -moz-transition:width 2s,height 2s; /* Firefox 4 */ -webkit-transition:width 2s,height 2s; /* Safari and Chrome */ -o-transition:width 2s,height 2s;/* Opera */ } .t:hover{ width:300px; height:200px; } /*测试 transition-timing-function*/ .bwh{width:100px;height:50px;background:#cccccc;border:1px solid red;}.div1{ transition:width 2s; transition-timing-function: linear;/*规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）*/}.div2{ transition:width 2s; transition-timing-function: ease-in;/*规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。*/}.div3{ transition:width 2s; transition-timing-function: ease;/*规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1))*/}.div4{ transition:width 2s; transition-timing-function: ease-out;/*规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。*/}.div5{ transition:width 2s; transition-timing-function: ease-in-out;/*规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）*/}.bwh:hover{width:400px;}
/*测试透明度*/ .d{ width:200px; height:100px; background:black; transition:opacity 3s; -moz-transition:opacity 3s; /* Firefox 4 */ -webkit-transition:opacity 3s; /* Safari and Chrome */ -o-transition: opacity 3s;/* Opera */ } .d:hover{opacity: 0.1;} </style></head><body><div class="t"></div><div class="d"></div><div class="bwh div1"></div><div class="bwh div2"></div><div class="bwh div3"></div><div class="bwh div4"></div><div class="bwh div5"></div><div class="bwh div6"></div></body></html>
新闻热点
疑难解答
