RSS订阅爱生活爱技术
你的位置:首页 » CSS3 » 正文

CSS3 animation(CSS3 帧动画)

选择字号: 超大 标准 发布时间:2013年12月14日 | 作者:root | 0个评论 | 344人浏览

以前浏览器中的DOM动画都是通过js来实现的,现在css3提供了动画功能,即animation,下面是一个进度条的例子来说明如何使用。


先创建一小段HTML片段。

<div class="wp">
	<div class="inner animation" id="animation"></div>
</div>

接下来写CSS

.animation{ 
	/* 定义CSS3动画 */
	-webkit-animation-name: animation-name; /*动画名字,与keyiframes结合使用*/
	-webkit-animation-duration: 10s; /*动画持续时间*/
	-webkit-animation-timing-function: linear; /*动画播放方式,当前为线性*/
	-webkit-animation-iteration-count: infinite;/*动画播放次数,当前为无限循环*/
	-webkit-animation-delay: 2s;/* 动画延时开始时间 */
	-webkit-animation-direction: 'normal'; /* 播放方向 */
	/* -webkit-animation-play-state: 'running';  播放状态 */
	
	animation-name: animation-name;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@-webkit-keyframes animation-name{/* CSS3 帧动画时间轴,兼容webkit私有属性 */
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
@keyframes animation-name{/* CSS3 帧动画时间轴 */
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
.wp .inner{ /* CSS2 */
	display: inline-block;
	width: 0;
	height: 20px;
	border-radius: 4px;
	background-color: #5bc0de;
}

这样应用了inner和animation class就可以动起来了。


浏览器兼容性可以查看http://caniuse.mojijs.com/html/item/css-animation/index.html


标签:

如果您认为文章对您有帮助请点击广告

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类
最近发表