揭秘CSS(第 1 版)
8.2 过渡
阅读(

transition-timing-function属性效果演示

transition-timing-function

属性取值:











HTML代码:

<ul class="trans_box"> 
  <li class="trans_list ease">ease</li>     
  <li class="trans_list linear">linear</li>     
  <li class="trans_list ease_in">ease-in</li>     
  <li class="trans_list ease_out">ease-out</li>     
  <li class="trans_list ease_in_out">ease-in-out</li>     
  <li class="trans_list step-start">step-start</li>     
  <li class="trans_list step-end">step-end</li>     
  <li class="trans_list steps-4-start">steps-4-start</li>     
  <li class="trans_list steps-4-end">steps-4-end</li>
</ul>

CSS代码:

.trans_box  {
	*zoom: 1;
}
 .trans_list  {
	width: 120px;
	height: 56px;
	line-height: 56px;
	margin: 10px 0;
	background-color: #486AAA;
	color: #fff;
	text-align: center;
	border-radius: 8px;
}
 .ease  {
	transition: all 4s ease;
}
 .ease_in  {
	transition: all 4s ease-in;
}
 .ease_out  {
	transition: all 4s ease-out;
}
 .ease_in_out  {
	transition: all 4s ease-in-out;
}
 .linear  {
	transition: all 4s linear;
}
 .step-start  {
	transition: all 4s step-start;
}
 .step-end  {
	transition: all 4s step-end;
}
 .steps-4-start  {
	transition: all 4s steps(4,start);
}
 .steps-4-end  {
	transition: all 4s steps(4,end);
}
 .trans_box: hover .trans_list, .trans_box_hover .trans_list  {
	margin-left: 85%;
	background-color: blue;
	transform: rotate(360deg);
}

运行效果:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps-4-start
  • steps-4-end
← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验