- 浏览: 151774 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
zhouweideshijie:
为什么在join的时候需要(select distinct t ...
mysql的exists与inner join 和 not exists与 left join 性能差别惊人 -
openxtiger:
太强了,一点都看不懂
看看谁聪明,类游戏寻找算法 -
metaphy:
无解. 定义n(A)为从A点发出的射线数, 若有解,则n(0, ...
看看谁聪明,类游戏寻找算法 -
ddccjjwwjj:
都不可以用 extjs5 具体用法怎么写
extjs 实现图片HTML5图片上传 -
openxtiger:
可以呀,但你做成连接池的时候,连接关闭时,只是还回给连接池,实 ...
mysql 必要的配置
本文非原创,引用来源:http://www.w3cplus.com/content/css3-animation
单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码(像我这种不懂js的人来说是件很高兴的事了),只是有一点不足之处,我们运用Animation能创建自己想要的一些动画效果,但是有点粗糙,如果想要制作比较好的动画,我见意大家还是使用flash或js等。虽然说Animation制作出来的动画简单粗糙,但我想还是不能减少我们大家对其学习的热情。
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用Transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:
Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。
Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下:
keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}'; keyframes-blocks: [ keyframe-selectors block ]* ; keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
我把上面的语法综合起来
@keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部写成百分比的形式: @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }
其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left,background等,value就是相对应的属性的属性值。值得一提的是,我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器,所以我需要在上面的基础上加上-webkit前缀,据说Firefox5可以支持css3的 animation动画属性。
我们来看一个W3C官网的实例
@-webkit-keyframes 'wobble' { 0% { margin-left: 100px; background: green; } 40% { margin-left: 150px; background: orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } }
这里我们定义了一个叫“wobble”的动画,他的动画是从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置,背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间,那么他每一段执行的状态如下图所示:
Keyframes定义好了以后,我们需要怎么去调用刚才定义好的动画“wobble”
CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。
下面我们来看看怎么给一个元素调用animation属性
.demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ }
CSS Animation动画效果将会影响元素相对应的css值,在整个动画过程中,元素的变化属性值完全是由animation来控制,动画后面的会覆盖前面的属性值。如上面例子:因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距,其默认值是:margin-left:100px;background: blue;但当我们在执行动画0%时,margin-left:100px,background:green;当执行到40%时,属性变成了:margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时:margin-left:100px;background: red;此时动画将完成,那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果,只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样,最后出现的权根是最大的。当动画结束后,样式回到默认效果。
我们可以看一张来自w3c官网有关于css3的animation对属性变化的过程示意图
从上面的Demo中我们可以看出animation和transition一样有自己相对应的属性,那么在animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我们分别来看看这几个属性的使用
一、animation-name:
语法:
animation-name: none | IDENT[,none | IDENT]*;
取值说明:
animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。
二、animation-duration:
语法:
animation-duration: <time>[,<time>]*
取值说明:
animation-duration是用来指定元素播放动画所持续的时间长,取值:≶time>为数值,单位为s (秒.)其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。
三、animation-timing-function:
语法:
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
取值说明:
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。
四、animation-delay:
语法:
animation-delay: <time>[,<time>]*
取值说明:
animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。
五、animation-iteration-count
语法:
animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值说明:
animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。
六、animation-direction
语法:
animation-direction: normal | alternate [, normal | alternate]*
取值说明:
animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
七、animation-play-state
语法:
animation-play-state:running | paused [, running | paused]*
取值说明:
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。
上面我们分别介绍了animation中的各个属性的语法和取值,那么我们综合上面的内容可以给animation属性一个速记法:
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*
如下图所示
DEMO一:发光变色的button
我们这个demo主要是通过在keyframes中改变元素的background;color;box-shadow三个属性,来达到一种发光变色的button效果,我们来看看其实现代码
HTML Code:
<a href="" class="btn">发光的button</a>
CSS Code
/*给这个按钮创建一个动名名称:buttonLight,然后在每个时间段设置不同的background,color来达到变色效果,改变box-shadow来达到发光效果*/ @-webkit-keyframes 'buttonLight' { from { background: rgba(96, 203, 27,0.5); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); color: red; } 25% { background: rgba(196, 203, 27,0.8); -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); color: blue; } 50% { background: rgba(196, 203, 127,1); -webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 100, 1); color: orange; } 75% { background: rgba(196, 203, 27,0.8); -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); color: black; } to { background: rgba(96, 203, 27,0.5); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); color: green; } } a.btn { /*按钮的基本属性*/ background: #60cb1b; font-size: 16px; padding: 10px 15px; color: #fff; text-align: center; text-decoration: none; font-weight: bold; text-shadow: 0 -1px 1px rgba(0,0,0,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); /*调用animation属性,从而让按钮在载入页面时就具有动画效果*/ -webkit-animation-name: "buttonLight"; /*动画名称,需要跟@keyframes定义的名称一致*/ -webkit-animation-duration: 5s;/*动画持续的时间长*/ -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/ }
效果:
效果一变化中效果二
为了更好的看出这个demo的效果,你可以把上面的代码复制到你本过的页面上,并使用safari和chrome,你会觉得很有意思,整个按钮好像在不停的呼吸一样。
Demo二:方形旋转变成圆型
我们这个demo是通过transform的rotate和border-radius不同值,把一个方型图片随着时间的推移,慢慢的转换成了个圆型效果,下面我们来看看其具体实现的效果
HTML Code:
<a href="#" class="box"></a> <span class="click-btn">Click</span>
CSS Code:
/*定义方型转化为圆型的动画round*/ @-webkit-keyframes 'round' { from{ -webkit-transform: rotate(36deg); -webkit-border-radius: 2px; } 10%{ -webkit-transform: rotate(72deg); -webkit-border-radius: 4px; } 20% { -webkit-transform: rotate(108deg); -webkit-border-radius: 6px; } 30% { -webkit-transform: rotate(144deg); -webkit-border-radius: 9px; } 40%{ -webkit-transform: rotate(180deg); -webkit-border-radius: 12px; } 50%{ -webkit-transform: rotate(216deg); -webkit-border-radius: 14px; } 60% { -webkit-transform: rotate(252deg); -webkit-border-radius: 16px; } 70% { -webkit-transform: rotate(288deg); -webkit-border-radius: 19px; } 80%{ -webkit-transform: rotate(324deg); -webkit-border-radius: 22px; } to { -webkit-transform: rotate(360deg); -webkit-border-radius: 25px; } } /*给方型box一个初步样式*/ a.box { display: block; width: 50px; height: 50px; background: red; margin-bottom: 20px; } /*圆型box的样式,并在这里应用animation*/ a.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: green; -webkit-animation-name: 'round'; /*动画名称*/ -webkit-animation-duration: 60s;/*播放一次所持续时间*/ -webkit-animation-timing-function: ease;/*动画播放频率*/ -webkit-animation-iteration-count: infinite;/*动画播放次涒为无限次*/ } /*click button效果*/ .click-btn { background: rgba(125,220,80,0.8); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); padding: 5px 10px; color: #369; font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); cursor: pointer; }
jQuery Code:
<script type="text/javascript"> $(document).ready(function(){ $(".click-btn").click(function(){ $(this).siblings().addClass("round"); }); }); </script>
我们载入时box是没有任何动画效果的,当我们点击了click button看给原box上加上一个round的class名,从而触发了一个round的动作。请看效果:
未点击按钮时效果(未触发动画效果)点击click按钮开始播放动画
我们这里简单的介绍了两个demo的应用,其实大家可以发挥自己的想像制作出更好更多的动画效果,如果你对animation制作动画很感兴趣,你可以参考这几个网站:webdesignersblog、slodive、impressivewebs这上面有许多特别有意的动画demo。
发表评论
-
extjs TabPanel 多行标题
2013-04-09 22:51 1709extjs TabPanel 的标题只能单行,如果设置ena ... -
CSS3 定位| Position
2012-08-04 09:26 878本文非原创,引用来源:http://blog.beyes.tw ... -
CSS3 Transition
2012-08-01 09:57 982本文非原创,引用来源:http://www.w3cplus.c ... -
CSS3 Transform
2012-08-01 09:54 912本文非原创,引用来源 ... -
CSS3动画制作
2012-08-01 09:50 9762D Transforms: transl ...
相关推荐
在本文中,我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分,它允许我们为元素添加平滑、动态的效果,从而提升用户体验和视觉吸引力。在这个主题中,...
**CSS3 Animation动画详解** CSS3是Web设计领域的一个重大突破,它引入了许多新的特性,其中最引人注目的就是动画(Animation)功能。通过CSS3的动画,开发者可以为网页元素添加平滑、动态的效果,提升用户体验。在...
### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用,尤其当动画需要根据用户的操作...
**CSS3 Animation详解** 在网页设计领域,CSS3(Cascading Style Sheets Level 3)引入了一种全新的动态效果——CSS3 Animation,它允许开发者通过纯CSS方式创建丰富的视觉动画,而无需依赖JavaScript或其他插件。...
在这个名为"纯css3 animation动画属性点击loading加载动画提示框效果代码.zip"的压缩包中,我们可以预见到一个利用CSS3的animation属性创建的交互式加载提示框的示例。 动画在现代网页设计中扮演着至关重要的角色,...
在网页设计中,CSS3 Animation是一种强大的工具,用于创建丰富的动态效果,比如我们今天要讨论的"网页logo图片加载动画特效"。这个特效能够提升用户体验,使得网站在内容加载时更具吸引力,不再枯燥乏味。下面我们将...
在IT领域,CSS3 Animation是一种强大的技术,用于创建动态、交互式的网页元素,尤其是文字动画特效。本资源“CSS3 Animation文字动画特效.zip”提供了一系列精心设计的文字动画,旨在为网页增加视觉吸引力,提升用户...
这本书《Pro CSS3 Animation》详细讲解了如何利用CSS3的新特性来增强网页的交互性和视觉效果。书中不仅介绍了CSS3动画的基础知识,还通过实例演示了如何将这些知识应用到实际的网页设计之中,从而使得网页内容更加...
在本项目中,我们探索了如何使用纯CSS3 Animation技术创建一套扁平风格的动态天气图标。CSS3 Animation是现代Web设计中一个强大的工具,它允许开发者通过关键帧动画为网页元素添加丰富的视觉效果,无需依赖...
【CSS3 Animation白天黑夜城市变化动画场景】 在Web开发中,CSS3的引入极大地扩展了网页的视觉表现力,特别是其动画(Animation)特性。这个“白天黑夜城市变化动画场景”是一个利用CSS3动画实现的精彩示例,它展示...
CSS3 Animation是CSS3中用于创建动画效果的一套属性集合,允许开发者在网页元素上应用更加复杂和多样化的动画效果。这篇入门指南的重点在于介绍CSS3中的`animation`属性,以及如何使用它来制作动画,同时涉及到了`...
css3 animation transform鱼游动特效</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, ...
**CSS3 Animation详解** 在网页设计中,CSS3(Cascading Style Sheets Level 3)引入了许多新特性,其中动画(Animation)功能让开发者能够创建出动态、丰富的用户体验。本项目"基于CSS3 animation的鼠标滑过按钮...
**CSS3 Animation圆点动画网页加载特效详解** 在现代网页设计中,为了提供更好的用户体验,网页加载时的动画效果越来越受到重视。"CSS3 Animation圆点动画网页加载特效"就是一个典型的例子,它利用CSS3的强大功能,...
在本文中,我们将深入探讨如何使用CSS3的`animation`属性来创建一个旋转的文字动画切换效果。CSS3作为现代网页设计的重要工具,提供了丰富的动画功能,让我们能够无需JavaScript即可实现动态视觉效果。以下是对这个...
本主题主要探讨如何利用jQuery与CSS3的animation属性实现多页面间的平滑过渡,为用户提供更加吸引人的浏览体验。 首先,jQuery 是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果等任务。而CSS3的...
【CSS3 Animation属性详解】 CSS3的Animation属性是现代网页设计中的一个重要工具,它使得开发者能够创建复杂的动态效果,如平滑的过渡、动画序列等,而无需依赖JavaScript或者其他外部库。在本案例中,我们将深入...
在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是动画(Animation)。这个“CSS3 Animation属性发光按钮代码.zip”文件内包含的是一段利用CSS3动画效果实现的发光按钮代码。...
在本案例中,我们关注的是CSS3的`animation`属性,它允许我们创建复杂的动态效果,如“纯css3 animation属性圆形动态时钟特效”。这个特效通过CSS3的动画功能,实现了一个逼真的圆形时钟,时针、分针和秒针都在不断...
本篇将深入探讨如何利用CSS3的animation特性制作逼真的自行车动画效果。 CSS3的animation属性集成了多个与动画相关的关键帧(keyframes)、持续时间、延迟、次数和方向等控制,为开发者提供了强大的动画设计工具。...