首页 > 开发 > CSS > 正文

css3中的动画属性animation应用场景及编写代码教程

2024-07-11 08:40:51
字体:
来源:转载
供稿:网友
讲解一下css3中的动画属性animation应用场景及编写代码教程

以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

讲解一下css3中的动画属性animation应用场景及编写代码教程

css3动画(animation)具有以下属性:

1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成,默认值是0;
3、animation-timing-function 动画的时间曲线,linear 匀速, ease 先慢后快,结束前变慢 。
4、animation-delay 动画在启动前的延迟间隔,默认是0
5、animation-iteration-count 动画的播放次数,默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。 值:paused 指定暂停动画 ; running 指定正在运行的动画,默认。

实例:本demo以平移(translate)为例说明动画的整个过程

html:

 

<body>		<div class="warp">					</div></body>

css:

 

.warp{	    height: 100px;	     width: 100px;	     border: 1px solid #eee;			            animation-name:moves;            animation-direction:alternate;            animation-delay: 0.2s;            animation-duration: 5s;            animation-play-state: paused;            animation-iteration-count: 3;           /*以上可以简写成:*/           animation: moves 5s linear 0.2s 3;}

 

@keyframes moves{                           /*动画名称自定义*/	10%{                                    /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/		transform: translate(100px,0);       		-ms-transform:translate(100px,0);	 /*IE 9*/ 		-moz-transform:translate(100px,0); 	/* Firefox */		-webkit-transform:translate(100px,0); /* Safari 和 Chrome */		-o-transform:translate(100px,0); 	/* Opera */	}	30%{                                    /*时间点可以任意*/		transform: translate(100px,100px);		-ms-transform:translate(100px,100px);	 /*IE 9*/ 		-moz-transform:translate(100px,100px); 	/* Firefox */		-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */		-o-transform:translate(100px,100px); 	/* Opera */	}	60%{                                       /*时间点可以任意*/		transform: translate(0,100px);		-ms-transform:translate(0,100px);	 /*IE 9*/ 		-moz-transform:translate(0,100px); 	/* Firefox */		-webkit-transform:translate(0,100px); /* Safari 和 Chrome */		-o-transform:translate(0,100px); 	/* Opera */	}	100%{                                /*时间点可以任意*/		transform: translate(0,0);		-ms-transform:translate(0,0);	 /*IE 9*/ 		-moz-transform:translate(0,0); 	/* Firefox */		-webkit-transform:translate(0,0); /* Safari 和 Chrome */		-o-transform:translate(0,0); 	/* Opera */	}}

css3中的动画属性animation应用场景及编写代码教程文章就讲到这里,欢迎浏览本站的其它内容,点击这里返回首页

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表