CSS3 动画



 





CSS3 动画



CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。







CSS3



动画





CSS3 @keyframes 规则



要创建CSS3动画,你将不得不了解@keyframes规则。



@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。







浏览器支持



表格中的数字表示支持该属性的第一个浏览器版本号。



紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。






























属性

 

 

 

 

 

@keyframes

43.04.0 -webkit-

10.0

16.05.0 -moz-

9.04.0 -webkit-

30.015.0 -webkit-12.0 -o-

animation

43.04.0 -webkit-

10.0

16.05.0 -moz-

9.04.0 -webkit-

30.015.0 -webkit-12.0 -o-














实例



@keyframesmyfirst{from{background:red;}to{background:yellow;}} @-webkit-keyframesmyfirst/* Safari 与 Chrome */{from{background:red;}to{background:yellow;}}





CSS3 动画



当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。



指定至少这两个CSS3的动画属性绑定向一个选择器:





  • 规定动画的名称





  • 规定动画的时长















实例



把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:



div{animation:myfirst5s; -webkit-animation:myfirst5s; /* Safari 与 Chrome */}



尝试一下 »



注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。





CSS3动画是什么?



动画是使元素从一种样式逐渐变化为另一种样式的效果。



您可以改变任意多的样式任意多的次数。



请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。



0% 是动画的开始,100% 是动画的完成。



为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。













实例



当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:



@keyframesmyfirst{ 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}} @-webkit-keyframesmyfirst/* Safari 与 Chrome */{ 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}}



尝试一下 »













实例



改变背景色和位置:



@keyframesmyfirst{ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}} @-webkit-keyframesmyfirst/* Safari 与 Chrome */{ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}







CSS3的动画属性



下面的表格列出了 @keyframes 规则和所有动画属性:
























































属性

描述

CSS

@keyframes

规定动画。

3

animation

所有动画属性的简写属性,除了 animation-play-state 属性。

3

animation-name

规定 @keyframes 动画的名称。

3

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3

animation-timing-function

规定动画的速度曲线。默认是 "ease"。

3

animation-delay

规定动画何时开始。默认是 0。

3

animation-iteration-count

规定动画被播放的次数。默认是 1。

3

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。

3

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

3


下面两个例子设置所有动画属性:













实例



运行myfirst动画,设置所有的属性:



div{animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari 与 Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;}



尝试一下 »













实例



与上面的动画相同,但是使用了简写的动画 animation 属性:



div{animation:myfirst5slinear2sinfinitealternate; /* Safari 与 Chrome: */ -webkit-animation:myfirst5slinear2sinfinitealternate;}





 


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部