CSS3中的动画功能(二)
2014-01-11 11:06
513 查看
上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations。和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。
首先来看一个示例:
下面解释以上代码:
@-webkit-keyframes 关键帧集合名{
创建关键帧的代码
40%{
本关键帧中的样式代码
}
}
其中的40% 0% 100%等可以自己定义的,表示一个过程的不同阶段,如果你有兴趣可以把每个阶段都写下来的。然后是在某个元素的某种状态下来使用它,比如上面的hover时使用时的格式为:
-webkit-animation-name:mycolor; 表示关键帧集合的名称,记得加上不同的前缀
-webkit-animation-duration:5s; 表示完成这个动作所需要的时间
-webkit-animation-timing-function:linear;表示实现动画的方法
-webkit-animation-iteration-count:infinite;表示动画播放次数
实现动画的方法的参数有:
linear:开始和结束以同样的速度进行改变
ease-in:开始慢,然后速度沿曲线值进行加快
ease-out:开始快,然后速度沿曲线值进行放慢
ease:开始慢,然后速度沿曲线值进行加快,然后再沿曲线值放慢
ease-in-out:动画以低速开始和结束
动画的播放次数参数:
n:具体的值
infinite:一直播放
还有:
-webkit-animation-delay:2s;动画的延迟时间
有了以上基础我们就可以做一个实现网页的淡入效果:
动画就说这些了,还有一些大家可以参考w3c官方手册。
首先来看一个示例:
<!DOCTYPE html> <head> <meta charset='utf-8'> <title>HTML5</title> </head> <body> <style> #animations{ background-color: red; width:100px; } @-webkit-keyframes mycolor{ 0%{ background-color: red; -webkit-transform:rotate(0deg); } 40%{ background-color: blue; -webkit-transform:rotate(30deg); } 70%{ background-color: yellow; -webkit-transform:rotate(-30deg); } 100%{ background-color: red; -webkit-transform:rotate(0deg); } } @-moz-keyframes mycolor{ 0%{ background-color: red; -moz-transform:rotate(0deg); } 40%{ background-color: blue; -moz-transform:rotate(30deg); } 70%{ background-color: yellow; -moz-transform:rotate(-30deg); } 100%{ background-color: red; -moz-transform:rotate(0deg); } } #animations:hover{ -webkit-animation-name:mycolor; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-name:mycolor; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite; } </style> <div id="animations"> 鼠标放在我身上可以吗 </div> </body> </html>
下面解释以上代码:
@-webkit-keyframes 关键帧集合名{
创建关键帧的代码
40%{
本关键帧中的样式代码
}
}
其中的40% 0% 100%等可以自己定义的,表示一个过程的不同阶段,如果你有兴趣可以把每个阶段都写下来的。然后是在某个元素的某种状态下来使用它,比如上面的hover时使用时的格式为:
-webkit-animation-name:mycolor; 表示关键帧集合的名称,记得加上不同的前缀
-webkit-animation-duration:5s; 表示完成这个动作所需要的时间
-webkit-animation-timing-function:linear;表示实现动画的方法
-webkit-animation-iteration-count:infinite;表示动画播放次数
实现动画的方法的参数有:
linear:开始和结束以同样的速度进行改变
ease-in:开始慢,然后速度沿曲线值进行加快
ease-out:开始快,然后速度沿曲线值进行放慢
ease:开始慢,然后速度沿曲线值进行加快,然后再沿曲线值放慢
ease-in-out:动画以低速开始和结束
动画的播放次数参数:
n:具体的值
infinite:一直播放
还有:
-webkit-animation-delay:2s;动画的延迟时间
有了以上基础我们就可以做一个实现网页的淡入效果:
<!DOCTYPE html> <head> <meta charset='utf-8'> <title>HTML5</title> <style> @-webkit-keyframes fadein{ 0%{ opacity: 0; background-color: white; } 100%{ opacity: 1; background-color: white; } } @-moz-keyframes fadein{ 0%{ opacity: 0; background-color: white; } 100%{ opacity: 1; background-color: white; } } body{ -webkit-animation-name:fadein; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:1; -moz-animation-name:fadein; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:1; } </style> </head> <body> 示例 </body> </html>
动画就说这些了,还有一些大家可以参考w3c官方手册。
相关文章推荐
- 中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!
- CSS3中的动画功能-transition功能与animations功能
- CSS3——动画功能
- CSS3中的动画功能(一)
- CSS3动画之二:Animations功能
- css3 - 动画功能 — Transitions功能
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- css3动画功能介绍
- CSS3动画功能 --- transition、transform、3D场景
- CSS3的transition动画功能
- CSS3中的动画功能之transtions和animations详解
- html5与css3权威指南--读书笔记---css3中的动画功能
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- CSS3动画之一:Transitions功能
- CSS3中的动画功能之笔记
- CSS3 实现动画功能
- css3中的动画功能
- CSS3动画之一:Transitions功能
- CSS3动画之一:Transitions功能
- css3 - 动画功能 — Animations功能