CSS3 animation(CSS3 帧动画)

当前位置 : 首页 > 网页制作 > CSS > CSS3 animation(CSS3 帧动画)

CSS3 animation(CSS3 帧动画)

来源: 作者: 时间:2016-01-28 09:27
email:[email protected] com以前浏览器中的DOM动画都是通过js来实现的,现在css3提供了动画功能,即animation,下面是一个进度条的例子来说明如何使用。先创建一小段HTML片段。接下来写CSS ani

email:

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

 

先创建一小段HTML片段。

 


 

 

 

接下来写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就可以动起来了。

n/index.

Tag:
网友评论

<