transition 打造鼠标滑过图片时的放大效果

transition 制作鼠标滑过图片时的放大效果
动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程
1 transition 制作动画

css
.wrap{
		width: 340px;height: 340px;
		position: absolute;
		top: 30%;
		left: 20%;
		overflow: hidden;
		border: 1px solid;
		

	}
	img{
		transition:transform 5s;
	}
	img:hover{
		transform:scale(1.4,1.4);
	}
html
<div class="wrap"><img src="1.png" alt="" ></div>

设置好wrap的宽度高度，并且设置overflow hidden  这样可以时图片放大时wrap尺寸不会随它变化，并且溢出的隐藏起来。
当鼠标滑过时，为transform  设置5s的过度效果。
transition 语法transition :all 0.5s linear 1s all表示所有属性变化都用过渡效果四个参数依次表示属性，过渡时间，过渡函数，延迟时间


2 keyframes  制作动画

css 定义动画过程
@-webkit-keyframes first{
		0%{
			transform:rotate(0deg);
		}
		25%{
			transform:rotate(90deg);
		}
		50%{
			transform:rotate(180deg);
		}
		75%{
			transform:rotate(270deg);
		}
		100%{
			transform:rotate(360deg);
		}
	}
img{
		position: absolute;
		top: 30%;
		left: 20%;
		animation:first 5s infinite ;
		-webkit-animation: first 5s infinite linear;
		/*transform:rotate(10deg);*/
	}
animation要配合keyframes来使用