从广义上来讲, CSS3 动画可以分为两种.
过渡动画
第一种叫过渡 (transition) 动画, 就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小, 位置, 颜色, 变形 (transform) 等等这些属性. css 过渡只能定义首和尾两个状态, 所以是最简单的一种动画.
要想使一个元素产生过渡动画, 首先要在这个元素上用 transition 属性定义动画的各种参数. 可定义的参数有:
transition-property: 规定对哪个属性进行过渡.
transition-duration: 定义过渡效果花费的时间. 默认是 0.
transition-timing-function: 定义过渡动画的缓动效果, 如淡入, 淡出等, 默认是 ease.
transition-delay: 规定过渡效果的延迟时间, 即在过了这个时间后才开始动画, 默认是 0.
css 代码
- div{
- transition-property: width; /* 对宽度进行过渡 */
- transition-duration: 1s;/* 过渡时间为 3s*/
- transition-timing-function: ease;/* 过渡效果为 ease */
- transition-delay: 2s;/* 延迟 3s 后才开始过渡 */
- }
为了书写方便, 也可以把这四个属性按照以上顺序简写在一个 transition 属性上:[code=css,css 代码]div{ transition:width 1s ease 2s; }
如果是使属性的默认值, 则可以省略: div{ transition:width 1s } 相当于 div{ transition:width 1s ease 0;}
如果想要同时过渡多个属性, 可以用逗号隔开, 如: div{ transition:width 1s,height 1s,opacity 1s;}
使用 transtion 属性只是规定了要如何去过渡, 要想让动画发生, 还得要有元素状态的改变. 如何改变元素状态呢, 当然就是在 css 中给这个元素定义一个类(:hover 等伪类也可以), 这个类描述的是过渡动画结束时元素的状态.
html 代码
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>`substitute(Filename('','Page Title'),'^.','\u&','')`</title>
- <style type="text/css" media="all">
- div{
- width:100px;height:100px;background-color:#000;/* 初始状态 */
- transition:width 3s,height 3s,background-color 3s;/* 定义过渡动画的参数 */
- }
- div:hover{
- width:400px;height:400px;background-color 3s;/* 过渡结束时的状态 */
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
关键帧动画
第二种叫做关键帧 (keyframes) 动画. 不同于第一种的过渡动画只能定义首尾两个状态, 关键帧动画可以定义多个状态, 或者用关键帧来说的话, 过渡动画只能定义第一帧和最后一帧这两个关键帧, 而关键帧动画则可以定义任意多的关键帧, 因而能实现更复杂的动画效果.
用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100%.(0% 是动画的开始, 100% 是动画的完成.)
关键帧动画的定义方式也比较特殊, 它使用了一个关键字 @keyframes 来定义动画. 具体格式为:
@keyframes 动画名称{
时间点 {元素状态}
时间点 {元素状态}
...
}
animation 属性有以下这些:
像前面讲的 transition 属性一样, 也可以把这些 animation 属性简写到一个 animation 中, 使用默认值的也可以省略掉. 但 animation-play-state 属性不能简写到 animation 中.
只要把定义好的动画绑定到元素上, 就能实现关键帧动画了, 而不是像第一种过渡动画那样, 需要一个状态的改变才能触发动画.
注意, 为了达到最佳的浏览器兼容效果, 在实际书写代码的时候, 还必须加上各大浏览器的私有前缀
关键帧的书写方式很灵活, 一行可以写多个关键帧.
如: html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- div{
- width:100px;
- height:100px;
- background:red;
- position:relative;
- animation:myfirst 5s;
- -moz-animation:myfirst 5s; /* Firefox */
- -webkit-animation:myfirst 5s; /* Safari and Chrome */
- -o-animation:myfirst 5s; /* Opera */
- }
- @keyframes myfirst{
- 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;}
- }
- @-moz-keyframes myfirst{
- 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-keyframes myfirst{
- 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;}
- }
- @-o-keyframes myfirst{
- 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;}
- }
- </style>
- </head>
- <body>
- <p><b > 注释:</b > 本例在 Internet Explorer 中无效.</p>
- <div></div>
- </body>
- </html>
Animate.css 的使用
Animate.css 是一个有趣的, 跨浏览器的 css3 动画库.
用法
1, 首先引入 animate css 文件
html 代码
<link rel="stylesheet" href="animate.css">
2, 给指定的元素加上指定的动画样式名
这里包括两个 class 名, 第一个 animated 是基本的, 必须添加的样式名, 任何想实现的元素都得添加这个. 第二个是指定的动画样式名.
html 代码
<div class="animated bounceOutLeft"></div>
3, 如果说想给某个元素动态添加动画样式, 可以通过 jquery 来实现:
html 代码
$('#yourElement').addClass('animated bounceOutLeft');
4, 当动画效果执行完成后还可以通过以下代码添加事件
javascript 代码
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
有些动画效果最后会让元素不可见, 比如淡出, 向左滑动等等, 可能你又需要将 class 删除, 以便可以再次进行同一个动画. 比如:
javascript 代码
- $(function(){
- $('#demo').addClass('animated bounce');
- setTimeout(function(){
- $('#demo').removeClass('bounce');
- }, 1000);
- });
animate.css 的默认设置也许有些时候并不是我们想要的, 所以你可以重新设置, 覆盖掉 animate.css 里面所定义的就行了. 比如:
css 代码
- #demo{
- animate-duration: 2s; // 动画持续时间
- animate-delay: 1s; // 动画延迟时间
- animate-iteration-count: 2; // 动画执行次数
- }
所有的动画样式名及下载详情参见 https://daneden.github.io/animate.css/ .
来源: http://www.qdfuns.com/article/43485/7dc048cf0cbe1d0421e36763ad4ff039.html