CSS3 过渡(Transition)

发布时间：2020-07-04 06:50:17 作者：frwupeng517
来源：网络阅读：503

过渡 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;

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

兼容性：

CSS3 过渡(Transition)

代码示例一：

<!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>

滚动前：

CSS3 过渡(Transition)

滚动中：

CSS3 过渡(Transition)

代码示例二：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
	h2{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>
	<h2>请将鼠标移动到下面的矩形上：</h2>
	<ul class="test">
		<li>背景色过渡</li>
		<li>背景色过渡</li>
		<li>背景色过渡</li>
		<li>背景色过渡</li>
		<li>背景色过渡</li>
	</ul>
  
 </body>
</html>

CSS3 过渡(Transition)

CSS3 过渡(Transition)

相关阅读