图片自动放大缩小，模拟”心脏跳动”

 

/*给这个按钮创建一个动名名称：my_chage2
@-webkit-keyframes 'my_chage2' {
	from {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
	50% {
		-moz-transform:scale(1.15,1.15);
		-webkit-transform:scale(1.15,1.15);
		-o-transform:scale(1.15,1.15);
		transform:scale(1.15,1.15);
	}
	to {
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		transform:scale(1,1);
	}
}

 

前半段时间图片从1扩大到1.15倍

后半段时间图片从1.15倍缩小至1倍

往复循环，实现图片不断扩大缩小，有点类似于“心脏跳动”

 

#hart_2,#hart_3 {
	/*调用animation属性，从而让按钮在载入页面时就具有动画效果*/
	-webkit-animation-name: "my_chage2"; /*动画名称，需要跟@keyframes定义的名称一致*/
	-webkit-animation-duration: 2s;/*动画持续的时间长*/
	-webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/
}