过渡 transition

复合属性，使CSS属性值在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果


取值：

<'transition-property'>：检测或设置对象中参与过渡的属性

<'transition-duration'>：检测或设置对象过渡的持续时间

<'transition-timing-function'>：检测或设置对象中过渡的动画类型

<'transition-delay'>：检测或设置对象延迟过渡的时间


1、过渡属性 <'transition-property'>

取值：none | all | property

例如：transition-property: width;

          transition-property: border-color, background-color, color;


2、过渡时间 <'transition-duration'>

取值：以 s | ms 作为单位


3、过渡时间曲线函数  <'transition-timing-function'>

取值：预定的值或贝塞尔曲线

ease：默认值，慢速开始，快速变快，再慢速结束

linear：匀速

ease-in：慢速开始，加速效果

ease-out：快速开始，减速效果

ease-in-out：慢速开始和结束，中间先加后减


4、过渡延迟 <'transition-delay'>

取值：以 s | ms 作为单位


语法：transition: property duration timing-function delay;

例如：

transition: transform 2s, border-radius 2s

transition: all .5s ease-in .1s;


激发过渡效果：现阶段，只能通过 鼠标移入 时进行激发


兼容性：

wKioL1g1U2-ykWXbAAA9hshwXW0542.png


代码示例一：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #d1{
      width:200px;
      height:200px;
      background-color:#369;

      text-align:center;
      line-height:200px;
      font-size:18px;

      /*1、过渡属性*/
      transition-property:all;
      /*2、过渡时间*/
      transition-duration:2s;
      /*3、速度曲线函数*/
      transition-timing-function:linear;
      /*4、延迟*/
      transition-delay:0s;
      
    }
    #d1:hover{
      /*通过转换-位移实现 位置向右移动 200px*/
      transform:translate(500px) rotate(360deg);
      border-radius:50%;
      background-color:#693;
    }
  </style>
 </head>
 <body>
  <div id="d1">滚动的元素</div>
 </body>
</html>


滚动前：

wKiom1g1U4GQJ51ZAAANhNpSVac614.png

滚动中：

wKiom1g1U4-zq_GDAAAhrVfyEwU898.pngwKioL1g1U5qQurDXAAAXrB_-fIE331.png




代码示例二：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
	h1{font-size:16px;}
	.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
	.test li{float:left;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;
		-webkit-transition:background-color 3.5s ease-in;
		-moz-transition:background-color 3.5s ease-in;
		transition:background-color 3.5s ease-in;
	}
	.test li:nth-child(1):hover{background-color:#bbb;}
	.test li:nth-child(2):hover{background-color:#999;}
	.test li:nth-child(3):hover{background-color:#630;}
	.test li:nth-child(4):hover{background-color:#090;}
	.test li:nth-child(5):hover{background-color:#f00;}
</style>
</head>
<body>
	<h1>请将鼠标移动到下面的矩形上：</h1>
	<ul class="test">
		<li>背景色过渡</li>
		<li>背景色过渡</li>
		<li>背景色过渡</li>
		<li>背景色过渡</li>
		<li>背景色过渡</li>
	</ul>
  
 </body>
</html>

wKiom1g1VTeQm884AAANOTQl0g8787.png