css3动画效果animation

阅读() @2019-05-12 11:46:31

css3中的动画属性主要由2部分构成,第一是定义动画过程(@keyframes  动画名称),第二是执行动画(animation:动画名称   执行时间)。

比如,我现在要给一个div设置动画效果,由原来的宽100px、高100px、红色背景在3s之内变成宽200px、高200px、橙色背景。代码如下:

css部分:

.value:hover{animation:myDiv 3s}

@keyframes myDiv{
	from{width:100px;height:100px;background:red}
	to{width:100px;height:100px;background:orange}
}
@-moz-keyframes myDiv{
	from{width:100px;height:100px;background:red}
	to{width:100px;height:100px;background:orange}
}
@-webkit-keyframes myDiv{
	from{width:100px;height:100px;background:red}
	to{width:100px;height:100px;background:orange}
}
@-o-keyframes myDiv{
	from{width:100px;height:100px;background:red}
	to{width:100px;height:100px;background:orange}
}

html部分:

<div class="value"></div>

这样就可以轻松完成一个动画了!注意,目前css3还不能兼容IE6及以下版本和其他低版本的浏览器,所以需要在代码的前边加上相应的内核前缀!

微信二维码