css3中变形与动画(三)

transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关。本文就介绍animation属性。

animation属性通过一些关键帧中元素属性的改变来实现动画效果。当然也可以控制动画持续时间,动画迭代次数等。

一、例子

在介绍transition时开篇有一个例子就是实现鼠标放上去,div宽度从100px缓慢增大到200px。

用transition实现方法如下

div:hover{width: 200px;transition:width 5s ease-in;
}

用animation也能实现类似效果,如下:

<style type="text/css">
div {width: 100px;height: 100px;background-color: red;
}
@keyframes enlarge {0% {width: 100px;}50% {width: 150px;}100% {width: 200px;}
}
div:hover {/*width: 200px;    */   /*transition:width 5s ease-in;*/animation: 5s enlarge;
}
}
</style>
<div></div>

鼠标悬停,动画持续5s,在时间到一半时div的宽度要从100px达到150px,5s时div宽度达到200px,动画结束。

但是transition和animation效果还是有差别的,鼠标hover上去,transition动画执行完后width保持200px;animation动画执行完后width回到100px。

当然这只是默认效果,这个动画完成时的效果也是可以修改的。

修改上面代码中animation为

animation: 5s enlarge forwards;

就可以让动画执行完后停在最后一帧。这个forwards是animation-fill-mode的值,后面会详细讲。

通过这个例子只是想说,可以理解为transition是animation的简化版,animation可以做更多的控制,也更强大。下面正式开始介绍。

二、keyframes

keyframes意思是“关键帧”,在关键帧会改变元素属性的计算值。

keyframes语法:

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;}}

可见keyframes写法是这样的:由"@keyframes"开头,后面紧跟这个“动画的名称”加上一对花括号“{}”,括号中是一些不同时间段的样式规则,规则写法同css样式。

一个“@keyframes”中的样式规则是由多个百分比构成的,如"0%"到"100%"之间,可以在一个规则中创建多个百分比,分别在每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种不断变化的效果,比如说移动、改变元素颜色、位置、大小、形状等。

两个关键字,"from"和"to"表示一个动画从哪开始,到哪结束,也就是"from"相当于"0%",而"to"相当于"100%"。

Note:0%中的%不能省略,省略则整个keyframes语法错误,整条规则无效,因为keyframes的单位只接受百分比值。

工作中有遇到压缩工具yui compressor把css3中的0%压缩成0导致动画失效的情况。所以css如果压缩尽量写成from,to避免这种问题。【update:2016-08-02】

举例:W3C官网的实例,下面介绍animation时会用到这段代码。

 @-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;}}

keyframes定义每一帧的动画,但只写keyframes是没用的,需要调用才能生效。那怎样调用就用到animation了。

三、animation

animation没有事件触发时,在页面加载后显式的随着时间变化来改变元素css样式,从而产生动画效果。

元素是怎样调用animation和keyframes的呢?

举例:调用上面写好的wobble动画。

 .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;/*定义动画方式*/}

到此,如果前面看过transition应该已经明白animation也是个复合属性。

animation包含下面属性: animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state和animation-fill-mode。下面一一介绍,重点理解加粗的属性。

1、animation-name

animation-name是最关键的了,表示应用哪个帧动画。

语法:

animation-name: none | IDENT[,none | IDENT]*;

默认值:none,即默认情况没有动画效果。

animation-name属性调用@keyframes定义好的动画,必须和"@keyframes"定义的动画名称完全一致(区分大小写)。

举例:animation配合矩阵变换中的平移做一个有意思的小动画。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
@keyframes around{0% {transform: translateX(0);}25%{transform: translateX(180px);}50%{transform: translate(180px, 180px); }75%{transform:translate(0,180px);}100%{transform: translateY(0);}
}
div {width: 200px;height: 200px;border: 1px solid red;margin: 20px auto;
}
div span {display: inline-block;width: 20px;height: 20px;background: orange;border-radius: 100%;animation-name:around;animation-duration: 10s;animation-timing-function: ease;animation-delay: 1s;animation-iteration-count:infinite;
}
</style>
</head>
<body><div><span></span></div></body>
</html>
View Code

2、animation-duration

语法:

animation-duration: <time>[,<time>]*

默认值为0,意味着动画时长0,即没有动画效果(如果值为负值被视为0)。

animation-duration定义播放动画持续的时间,也就是完成从0%到100%一次动画所需要的时间。单位s。

3、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属性用来设置动画播放方式。详情可参考css3中变形与动画(二)中的介绍。

4、animation-delay

语法:

animation-delay:<time>[,<time>]*

animation-delay定义事件触发到动画开始执行的时间,即延时。

5、animation-iteration-count

语法:

animation-iteration-count: infinite | <number> [, infinite | <number>]*

animation-iteration-count属性用来定义动画的播放次数

默认值为1,即动画从开始到结束只播放一次。

值为infinite,动画将会无限次播放。

6、animation-direction

语法:

animation-direction:normal | alternate [, normal | alternate]*

animation-direction设置动画播放方向。

属性:

normal:默认值,如果值为normal时,动画每次循环都是向前播放。

alternate:奇数次播放动画是按顺序播放各帧动画,偶数次播放动画是按逆序播放各帧动画。

这个alternate还是很有用的,我写了一个例子,可以感受一下alternate效果。

例子:div尺寸由小到大,然后由大到小。

<style type="text/css">@-webkit-keyframes 'testAnimationDirection' {0% {width: 50px;}20% {width: 100px;}40% {width: 150px;}60% {width: 200px;}80% {width: 250px;}100% {width: 300px;}}div{width: 50px;height: 50px;border:1px solid red;-webkit-animation-name:'testAnimationDirection';-webkit-animation-duration: 10s;-webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-fill-mode:backwards;}
</style>
<div></div>
View Code

7、animation-play-state

animation-play-state用来控制元素动画的播放状态。

参数:

running:running是其默认值,作用是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放。

Note:

这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。

如果暂停了动画的播放,元素的样式将回到最原始设置状态。

paused:暂停播放。

这个很有用,让动画在鼠标悬停时暂停,离开时继续播放。

例子:还是上面的例子,加下面代码即可。

  div:hover{animation-play-state:paused;}

8、animation-fill-mode

animation-fill-mode规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用的样式。

有四个属性值:

none:默认值,动画执行前后不改变元素的任何样式。就是说动画在第一个关键帧播放之前不影响元素,最后一个关键帧播放完后停止影响元素。

forwards:动画完成后呆在最后一帧,就是保持结束时的状态。这里的最后一帧取决于animation-direction和animation-iteration-count:

backwards:在animation-delay期间应用第一帧。保持animation-delay,第一帧取法如下:

both:根据animation-direction轮流应用forwards和backwards规则。

Note:forwards和backwards关键字都是有s的。

backwards和none的区别

还是上面的例子,只是增加了animation-fill-mode属性。

<style type="text/css">@-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;}}div{width: 50px;height: 50px;margin-left: 100px;background: blue;-webkit-animation-name:'wobble';-webkit-animation-duration: 10s;-webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 10s;-webkit-animation-iteration-count: 10;-webkit-animation-direction: alternate;/* -webkit-animation-fill-mode:none; /*动画开始为蓝色*/-webkit-animation-fill-mode:backwards; /*动画开始为绿色*/}
</style>
<div></div>

animation-fill-mode为none,则动画开始延时期间div为蓝色,backwards则动画开始延时期间div为绿色。

四、综合实例

【更新于2015/11/13】

举一个工作中做的例子:

效果如下,“买完回来领会员”是一个按钮,会左右晃动吸引用户注意力。用户hover上去点的时候动画停住让用户可以点击,不然点不到哈。

用到的图片

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>animation by starof</title>
<style>
body{margin:0;}
.w4{height:200px;background-color:#ef9b14;position: relative;
}
/*绝对定位*/
.w4 .buy-icno{position:absolute;top:0;right:50%;margin-right:-472px;z-index:5;
}
/*infinite动画一直重复*/
.w4 .buy-icno{-webkit-animation:transform 2.5s linear infinite forwards;-moz-animation:transform 2.5s linear infinite forwards;-ms-animation:transform 2.5s linear infinite forwards;animation:transform 2.5s linear infinite forwards;
}.w4 .buy-icno:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;
}
/*4个时间段,0%到25%,从最低点到左上;25%到50%,从左上到最低点;50%到70%,从最低点到右上;70%到100%,从右上到最低点*/
@-webkit-keyframes transform { 0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes transform { 0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}</style>
</head>
<body><div class="w4">
<a href=""><img class="buy-icno" src="images/buy-icno1.png"></a>
</div>
</body>
</html>
View Code

原理:

  • 动画分为4个时间段,0%到25%,从最低点到左上;25%到50%,从左上到最低点;50%到70%,从最低点到右上;70%到100%,从右上到最低点。
  • 然后设置动画重复次数为infinite,即animation-iteration-count:infinite;一直重复。
  • 鼠标hover上去设置animation-play-state:paused;动画暂停。
  • 设置动画播放速度为线性animation-timing-function:linear,所以动画一直是匀速的。
  • 设置animation-fill-mode:forwards;动画完成停在最后一帧,不过这个在本动画中没什么影响。

动画具体内容用的是transform变形动画,深入学习可参考css3中变形与动画(一)。

  • 设置transform-origin:top center;变形的基点默认是中心点,我们需要将其设置为上面这个"绳子"不动,也就是图片的top center位置。
  • 25%时到达左上;实现的时候就是顺时针旋转20度。同理75%是逆时针旋转20度。
  • 0%,50%,100%时都说旋转0度,即不改变。

五、相关资源

看网上资料说做动画,尽量使用绝对定位,从而避免重绘重排问题:

动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html

动画十二原则:http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

传说中动画利器——css3 animation动画库,有很多基础动画

http://daneden.github.io/animate.css/

[github 地址:https://github.com/daneden/animate.css]

hover animation动画

http://leaverou.github.io/animatable/

CSS3 Animation制作飘动的浮云和星星效果

css3 animation在线调节工具:

http://melonh.com/animationGenerator/     基于chrome的插件,可以快速调节页面上的动画

http://isux.tencent.com/css3/tools.html      腾讯isux一款非常强大的动画工具

http://tid.tenpay.com/labs/css3_keyframes_calculator.html    财付通的帧动画调节工具

参考资源链接:

css3 animation动画技巧

跳动心脏

闪烁的星星

w3c css3-animations

MDN animation-fill-mode

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4585324.html有问题欢迎与我讨论,共同进步。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262995.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Scott Mitchell 的ASP.NET 2.0数据教程之四十四::DataList和Repeater数据分页

原文 | 下载本教程中的编码例子 | 下载本教程的PDF版 导言 分页和排序是显示数据时经常用到的功能。比如&#xff0c;在一个在线书店里搜索关于ASP.NET 的书的时候&#xff0c;可能结果会是成百上千&#xff0c;而每页只列出十条。而且结果可以根据title&#xff08;书名&#…

通过ClassLoader调用外部jar包

通过ClassLoader调用外部jar包 我们大家都知道&#xff0c;每个运行中的线程都有一个成员contextClassLoader&#xff0c;用来在运行时动态地载入其它类。 系统默认的contextClassLoader是systemClassLoader&#xff0c;所以一般而言java程序在执行时可以使用JVM自带的类、$JAV…

Git回滚操作的总结

git结构和各操作之间的关系 1&#xff0c;撤销add操作&#xff1a; git reset 2&#xff0c;撤销commit操作&#xff1a; git reset –soft 保留源码&#xff0c;只回退commit信息到某个版本&#xff0c;不涉及index的回退&#xff0c;如果还需要提交&#xff0c;直接commit即…

Blender建模与游戏换装(转载文)

本文转载自https://my.oschina.net/huliqing/blog/880113?hmsrtoutiao.io 如果本文涉及侵权行为&#xff0c;请原作者联系博主邮箱&#xff0c;我将及时进行删除处理 博主邮箱&#xff1a;yibiandaoaliyun.com 前言 本文将详细讲解3D游戏中换装的原理及换装中的一些重点问题&a…

出路在哪里?出路在于思路!智者无敌

有人工作&#xff0c;有人继续上学&#xff0c;大家千万不要错过这篇文章&#xff0c;能看到这篇文章也是一种幸运&#xff0c;真的受益匪浅&#xff0c;对我有很大启迪&#xff0c;这篇文章将会改变我的一生&#xff0c;真的太好了&#xff0c;希望与有缘人分享&#xff0c;也…

xml02 XML编程(CRUD)增删查改

XML解析技术概述 Demo2.java import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import org.w3c.dom.Document; public class Demo2 { public static void main(String args[])throws Exception { //1.创建工程 DocumentBuilderFac…

ASP.NET Web Game 架构设计1--服务器基本结构

ASP.NET Web Game 架构设计1--服务器基本结构 1. 基本结构图 2. 系统组成与角色 整个系统大体上分为三个部分&#xff1a;1.网页客户端。2.IIS Web服务器。3.数据库及逻辑服务器。其中Web服务器不处理任何逻辑&#xff0c;它的作用只有两点&#xff1a;1.承载用户。…

人人网 Windows Phone 7 应用开发起步

目前&#xff0c;人人网在国内高校学生中的普及率非常高。前段时间&#xff0c;大概是11月下旬的样子&#xff0c;人人网发布了Windows Phone 7客户端的公测版。我想&#xff0c;Windows Phone 7本地化的优劣&#xff0c;直接关系到其将来在国内的市场份额。而诸如人人等针对学…

XP Sp2下双机通过无线网卡实现Internet共享

两台均有无线网卡、装有XP SP2系统的计算机如何实现共享Internet上网呢&#xff0c;请参考一下步骤&#xff1a; 1、打开两台计算机的无线网络连接属性&#xff0c;并切换至“无线网络配置”页签。2、点中右下角的高级按钮设置&#xff0c;选中最下面的“仅计算机到计算机” 和…

C#面向对象设计模式第九讲:Composite 组合模式(结构型模式)

&#xff08;根据MSDN Webcast相关课程整理&#xff09; 由俄罗斯套娃讲起。娃娃里又包含另一个娃娃&#xff0c;最后那个不包含任何娃娃。 组合模式&#xff0c;采用树型结构来实现普遍存在的对象容器&#xff0c;将本原一对多的复杂的关系&#xff0c;转换成一对一的简单关系…

Docker for Windows

安装条件&#xff1a;必须是 Win10 Pro 或者 Enterprise version. 转载于:https://www.cnblogs.com/qijiage/p/9261258.html

《火影忍者:究级风暴》渲染技术究极解析!

http://www.opengpu.org/forum.php?modviewthread&tid6609 与Takara Tomy公司的《火影忍者》系列游戏不同&#xff0c;初次登陆PS3平台的本作是由日本CyberConnect2制作的对战格斗游戏《火影忍者&#xff1a;终极英雄》系列的最新作。虽然游戏的开发商仍然是CyberConnect2…

工程中新增Properties

如一开始工程中是没有Properties文件夹的&#xff01; 但工程目录文件夹下却有一个Properties&#xff1a; 现在要向这个Properties文件夹中添资源文件。操作步骤&#xff1a; [添加新项]->[资源文件] 再将Resource.resx文件拉到Properties DONE!!!

Django:序列化的几种方法

前言 关于序列化操作&#xff0c;就是将一个可迭代的数据结构&#xff0c;通过便利的方式进行我们所需要的操作。 今天历来归纳一下&#xff0c;Django中的几种不同得分方法&#xff0c;已经Django-restframework提供的方法 创建一个Django的项目 再新建一个app 创建一个模型&a…

c#通过app.manifest使程序 右键 以管理员身份运行

c#通过app.manifest使程序以管理员身份运行 时间:2013-06-27 22:47来源:网络收集本站整理 作者:jtydl 点击: 1175 次微软在Windows Vista开始引入了UAC&#xff08;用户帐户控制&#xff09;新技术&#xff08;点击这儿了解什么是UAC&#xff09;。当程序执行时需要权限的话&am…

25款操作系统全面接触 [2]

Sun Solaris Sun Microsystems公司早期的操作系统版本Sun OS是基于BSD的。在1993年&#xff0c;他们与AT&T合作&#xff0c;转向了UNIX System V&#xff0c;并发布了称作Solaris.System V release 4的系统&#xff0c;这是一个UNIX System V和BSD的整合体。Solaris系统主…

Nuget发布Dll

今天要开始写ViewModel了&#xff0c;写完之后系统里的ViewModel都汇总到我这里&#xff0c;然后由我负责ViewModel的发布跟维护&#xff0c;所以Nuget发布Dll就要熟练啦~ 一&#xff0c;安装工具 1&#xff0c;Nuget Package Manager 2,NuGet.exe 下载地址为&#xff1a;http:…

技巧/诀窍:在ASP.NET中重写URL(转)

技巧/诀窍&#xff1a;在ASP.NET中重写URL 【原文地址】Tip/Trick: Url Rewriting with ASP.NET 【原文发表日期】 Monday, February 26, 2007 9:27 PM 经常有人请我指导应该如何动态地“重写”URL&#xff0c;以在他们的ASP.NETweb应用中发布比较干净的URL端点。这个博客帖…

妙趣横生算法 3:寻找相同元素的指针

实例说明 在已知两个从小到大的有序的数表中寻找出现的相同元素在第一个数表中的指针。 运行结果 实例解析 设两个数表的首元素指针分别为pa和pb,两个数表分别有元素an和bn个。另外&#xff0c;引入两个指针变量ca和cb,分别指向两个数表的当前访问元素。由于两个数表从小到大有…

Nginx 笔记与总结(14)expires 缓存设置

设置缓存&#xff0c;可以提高网站性能。 当网站的部分内容&#xff0c;比如新闻站的图片&#xff0c;一旦发布就不太可能发生更改&#xff0c;此时需要用户在访问一次页面之后&#xff0c;把该页面的图片缓存在用户的浏览器端一段时间&#xff0c;就可以用到 nginx 的 expires…