transition属性是一个很强大的3d动画属性，我动手试了一下，很多在网上很火的网页动画都可以用这个属性实现，只能说这个属性是在是太强大啦，本人在学习次属性之后才知道自己对css3的认识还是偏少，现在我给大家介绍并实际实现下该属性。

　　　　transition字面意思是变迁、变换、过度的意思，所以transition属性也离不开这个大致意思，其中该属性中的重要属性是：　　

　　　　　　　　transition-property:指定过度的元素; 如：transition-property:background,就是指background属性参与这个过度。

　　　　　　　　transition-duration：指定这个过度持续时间;

　　　　　　　　transition-delsy:延迟过度时间;

　　　　　　　　transition-timing-function:指定时间过度类型; 如：ease\linear\ease-in\ease-out\ease-in-out\　　　　其中：ease是越来越慢，linear是匀速　　　　　　　　运动，ease-in是先慢后快，ease-out是先快后慢，ease-in-out是先慢后快再慢

　　　　　　　　transition：all 0.3 ease;　　其中all是指全部属性参与，0.3是过度时间，ease是过度类型；

　　　　现在应该对这个属性有了个基本的了解，其实知道了上述属性，我们就可以动手做一些页面上的动画效果

.divt{
	text-align: center;
	padding-top: 150px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.divimg{
	text-align: center;
}
.imgts{
	width: 175px;
	height:175px;
	background-color: white;
	border: 2px solid blue;
	margin-top: 50px;
	margin-left: 50px;
	text-align: center;
	display: block;
	transform:rotate(10deg);
	transition:all 0.5s ease-in;
	box-shadow: 2px 2px 4px #9932CC;
	padding: 5px;
	margin: auto;
}
.imgts:hover{
	transform:rotate(0deg) scale(1.05);
	box-shadow: 15px 15px 21px blue;
}
.divimg1{
	width: 200px;
	height: 40px;
	background-color: pink;
	transition-property: background-color;
	transition-duration: 0.01s;
	transition-timing-function: ease;
}
.divimg1:hover{
	background-color: yellowgreen;
}

　　

　　　　上述代码实现了鼠标悬停图片旋转和鼠标悬停改变颜色的功能，这个是不是很好用。

　　注：box-shadow是盒阴影属性，transform:rotate()属性在http://www.cnblogs.com/chrxc/p/5121347.html提过

　　　　　　　　

版权声明：本文为chrxc原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/chrxc/p/5123375.html