CSS - transitions

CSS3 transitions

CSS3 用于处理带有 CSS3 属性的动画速度，与 transitions 一起使用，我们可以添加效果和运行效果

CSS3 transitions属性

CSS中用于 transitions 的一些常见属性

值	描述
transition	用于将四个过渡属性添加到一个属性中
transition-delay	用于在使用过渡时进行一些延迟
transition-duration	用于查找，运行动画正在发生多少秒/毫秒
transition-property	用于指定属性名称
transition-timing-function	用于指定要执行运行转换的时间函数


<html>
	 	<head>
	 	 	 <style>
	 	 	 	 	div {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background: pink;
	 	 	 	 	 	 -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
	 	 	 	 	 	 transition: width 2s;
	 	 	 	 	}

	 	 	 	 	div:hover {
	 	 	 	 	 	 width: 300px;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 -webkit-transform: rotate(180deg); /* Safari */
	 	 	 	 	 	 transform: rotate(180deg);
	 	 	 	 	}
	 	 	 	 	#div1 {-webkit-transition-timing-function: linear;}
	 	 	 	 	#div2 {-webkit-transition-timing-function: ease;}
	 	 	 	 	#div3 {-webkit-transition-timing-function: ease-in;}
	 	 	 	 	#div4 {-webkit-transition-timing-function: ease-out;}
	 	 	 	 	#div5 {-webkit-transition-timing-function: ease-in-out;}

	 	 	 	 	/* Standard syntax */
	 	 	 	 	 	 #div1 {transition-timing-function: linear;}
	 	 	 	 	 	 #div2 {transition-timing-function: ease;}
	 	 	 	 	 	 #div3 {transition-timing-function: ease-in;}
	 	 	 	 	 	 #div4 {transition-timing-function: ease-out;}
	 	 	 	 	 	 #div5 {transition-timing-function: ease-in-out;}
	 	 	 </style>
	 	</head>

	 	<body>
	 	 	 <div id="div1">linear</div><br>
	 	 	 <div id="div2">ease</div><br>
	 	 	 <div id="div3">ease-in</div><br>
	 	 	 <div id="div4">ease-out</div><br>
	 	 	 <div id="div5">ease-in-out</div><br>
	 	</body>
</html>

打印本页