秒速赛车输死了:威言威语

我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

CSS3动画技术 – Animation

秒速赛车时间 www.2s1a.cn 纯CSS3的动画效果,-webkit-animation 与 @-webkit-keyframes 的运用。

动画是CSS 3最有用的地方,用纯CSS3做出Flash一样的动画。

-webkit-animation:仍旧是一个复合属性,

-webkit-animation: name duration timing-function delay iteration_count direction;

包括以下几个属性

1、-webkit-animation-name 这个属性的使用必须结合 @-webkit-keyframes 一起使用

#rotate {
	margin: 0 auto;
	width: 600px;
	height: 400px; 
	/* 确保我们是在一个 3-D 空间 */
	-webkit-transform-style: preserve-3d;
	/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
	-webkit-animation-name: x-spin;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear; 
}
	/* 定义要调用的动画 */
@-webkit-keyframes x-spin { 
	0% { -webkit-transform: rotateX(0deg); } 
	50% { -webkit-transform: rotateX(180deg); }
	100% { -webkit-transform: rotateX(360deg); } 

百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大;

2、-webkit-animation-duration 表示动画持续的时间,默认为0;

3、-webkit-animation-timing-function 表示动画播放的方式

[语法]: -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

4、-webkit-animation-delay 表示开始动画之前的延时

[语法] -webkit-animation-delay: delay_time;

5、-webkit-animation-iteration-count 表示动画循环的次数,infinite即为无限次,默认是1。

[语法]-webkit-animation-iteration-count: times_number;

6、-webkit-animation-direction 表示动画的方向

[语法]-webkit-animation-direction: normal(默认) | alternate

normal 方向始终向前

alternate 当重复次数为偶数时方向向前,奇数时方向相反

7、[另外]跟animation有关的其他属性

(1)-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为(测试结果不是很清晰)

(2)-webkit-animation-play-state: running(默认) | paused 设置动画的运行状态。

本文固定链接: //www.2s1a.cn/blog/css3-animation.html | 威言威语

您可能还会对这些文章感兴趣!

CSS3动画技术 – Animation:目前有3 条评论

  1. avatar
    板凳

    支持的浏览器好少额

    2012-03-20 18:01 回复
  2. avatar
    沙发
    轻草飞扬 Unknow Browser Unknow Os

    加油加油。。。

    2008-07-12 11:37 回复

发表评论

avatar

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter

  • 中国社会科学院在京召开研讨会 探讨“三大史诗”在新时代的传承与发展 2019-06-16
  • 从稳中向好发展态势看我国经济良好前景 2019-06-16
  • 北京天安门广场更换花卉 2019-06-12
  • 除了杨崇勇,“2亿元贪官俱乐部”至少还有这些人 2019-06-11
  • 习近平:真抓实干埋头苦干万众一心 夺取脱贫攻坚战全面胜利 2019-06-11
  • 为社会奉献爱心 用青春书写梦想 2019-06-09
  • 重磅福利来袭,汽车之家盛大开启618品质购车节 2019-06-09
  • 相思湖边包鱼粽 孝心满满全家欢 2019-06-03
  • 高清:里约奥运会官方海报在当地博物馆展出 2019-06-03
  • 尧都农商银行全力推进服务“三农”工作 2019-05-20
  • 【理上网来】以创新为基点,是“过坎”的关键 2019-05-18
  • 台湾学者黄一农:书院不是“盘”下名号来挣钱的 2019-05-15
  • 靠啥为基层留住人才?( 民生视线·引导人才流动 助力均衡发展①) 2019-05-15
  • 结构优 动能足 中国经济继续保持高质量发展 2019-05-15
  • 内蒙古伊利实业集团股份有限公司获第十二届人民企业社会责任奖年度企业奖 2019-05-13
  • 318| 363| 502| 163| 396| 103| 151| 166| 911| 357|