css3 动画

  在CSS3中可以通过animation创建复杂的动画序列,像transition属性一样用来控制CSS的属性实现动画效果。

  animation实现动画效果主要由两个部分组成。

  1. 通过类似Flash动画中的关键帧来声明一个动画。
  2. 在animation属性中调用关键帧声明的动画,从而实现一个更为复杂的动画效果。

声明关键帧

  在CSS3中,把@keyframes称为关键帧。

  @keyframes的语法规则:命名是由@keyframes开头,后面紧跟着动画的名称(animation-name),再加上一对花括号"{...}",括号中是多个不同时间段的样式规则。一个@keyframes中的样式规则是由多个百分比构成的,每个百分比样式规则可以设置不同的样式属性。可以使用关键词“from”,“to”代表一个动画的开始与结束,“from”相当于0%,"to"相当于100%。

@keyframes yxz {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}

  这里我们定义了一个叫“yxz”的动画,他的动画是从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:“yxz”动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置,背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间,那么他每一段执行的状态如下图所示:

  在@keyframes中的关键帧并不是一定要按照顺序来指定,其实可以任何顺序来指定关键帧,因为动画中的关键帧顺序由百分比值确定而不是声明的顺序。

@keyframes yxz{
0%,40%{
width:200px;
height:200px;
}
20%,60%,80%{
width:100px;
height:100px;
}
100%{
width:0;
height:0;
}
}

  在这个例子中,0%,40%应用了相同的样式,20%,60%,80%也应用了相同的样式,100%时又是另外的样式。

  这两个动画,因为他们并没有附加到任何元素上,是没有效果的。通过声明@keyframes动画后,要让动画生效,需要通过CSS属性来调用@keyframes声明的动画。

调用关键帧

  使用动画属性animation调用@keyframes声明的动画。 动画属性animation,是一个复合属性,它包含了八个子属性。其语法如下:

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *

  animation-name:主要用来指定一个关键帧动画的名字,这个名字要与@keyframes声明的名称一样。css加载动画时会应用对应的名字来执行。

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

  IDENT:是由@keyframes创建的动画名称。

  none:默认值,当值为none时,没有任何动画效果,可以用来覆盖动画。

  animation-duration:主要用来设置动画播放所需要的时间,单位以s(秒)或ms(毫秒),默认值为0。

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

  animation-timing-function:主要用来设置动画的播放快慢方式。

  与transition-timing-function类似,可点击查看。

  animation-delay:主要用来设置动画延迟时间。

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

  当time为正整数时为延迟时间,负整数时会截断播放时间(把animation-duration所用的时间截断一部分,就是说跳过这部分值,直接进行后面的动画)  

  animation-iteration-count:主要用来设置动画播放的次数。

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

  通常为整数,也可以使用浮点数。默认值为1。如果取值为infinite,动画会无限播放。

  animation-direction:主要用来设置动画播放的方向。

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

  默认值为normal,动画每次循环都是向前播放。alternate,动画向前播放一次,向后播放一次。

  animation-play-state:主要用来控制动画播放的状态。

animation-play-state:running | paused [,running | paused] *

  running是默认值,是播放的意思,可以通过paused停止播放。

  animation-fill-mode:主要用来设置动画时间之外的属性,也就是动画开始前或者结束后的属性。

animation-fill-mode:none | forwards | backwards | both

  默认值为none,表示动画按期执行与结束,在动画结束时,会反回初始状态。forwards,当动画结束时,停留在最后最后一帧(保持最后的状态)。backwards,当动画开始时迅速应用第一帧。both,同时拥有forwards与backwards的作用。

学以致用,学习完动画的基础知识后,就需要练习一下,把学的东西用出来。可以把代码复制在浏览器中观看效果。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*元素从左边出现*/
@keyframes bga {
0% {
left: -500px;
} 100% {
left: 0;
}
}
/*元素从下边出来*/
@keyframes bgb {
0% {
top: 350px;
} 100% {
top: 0;
}
}
/*元素从小到大*/
@keyframes bgc {
0% {
transform: scale(0.1);
} 100% {
transform: none;
}
}
/*元素从大到小*/
@keyframes bgd {
0% {
transform: scale(2);
} 100% {
transform: none;
}
}
/*元素旋转并放大*/
@keyframes bge {
0% {
transform: rotate(-360deg) scale(0.1);
} 100% {
transform: none;
}
}
/*选中元素时,隐藏其他元素*/
@keyframes no {
0% {
z-index: 23;
} 100% {
z-index: 23;
}
}
/*兼容webkit浏览器*/
@-webkit-keyframes bga {
0% {
left: -500px;
} 100% {
left: 0;
}
} @-webkit-keyframes bgb {
0% {
top: 350px;
} 100% {
top: 0;
}
} @-webkit-keyframes bgc {
0% {
transform: scale(0.1);
} 100% {
transform: none;
}
} @-webkit-keyframes bgd {
0% {
transform: scale(2);
} 100% {
transform: none;
}
} @-webkit-keyframes bge {
0% {
transform: rotate(-360deg) scale(0.1);
} 100% {
transform: none;
}
} @-webkit-keyframes no {
0% {
z-index: 23;
} 100% {
z-index: 23;
}
} * {
margin: 0;
padding: 0;
} html, body {
height: 100%;
} img.bg {
width: 100%;
height: 100%;
position: fixed;
left: 0;
} .demo div {
position: absolute;
z-index: 9999;
} a {
display: block;
width: 100px;
height: 100px;
background: rgba(255, 0, 0,.2);
margin-bottom: 15px;
text-decoration: none;
color: #ffffff;
} #bga:target {
z-index: 100;
-webkit-animation:bga 2s ease;
animation:bga 2s ease;
} #bgb:target {
z-index: 100;
-webkit-animation:bgb 2s ease;
animation:bgb 2s ease;
} #bgc:target {
z-index: 100;
-webkit-animation:bgc 2s ease;
animation:bgc 2s ease;
} #bgd:target {
z-index: 100;
-webkit-animation:bgd 2s ease;
animation:bgd 2s ease;
} #bge:target {
z-index: 100;
-webkit-animation:bge 2s ease;
animation:bge 2s ease;
}
</style>
</head>
<body>
<div class="demo">
<div>
<ul>
<li><a href="#bga">第一张</a></li>
<li><a href="#bgb">第二张</a></li>
<li><a href="#bgc">第三张</a></li>
<li><a href="#bgd">第四张</a></li>
<li><a href="#bge">第五张</a></li>
</ul>
</div>
<img src="https://img.alicdn.com/imgextra/i3/2406102577/TB2OH62dFXXXXbDXpXXXXXXXXXX_!!2406102577.jpg" class="bg" id="bga" />
<img src="https://img.alicdn.com/imgextra/i1/2406102577/TB2ER.mdFXXXXXLXXXXXXXXXXXX_!!2406102577.jpg" class="bg" id="bgb" />
<img src="https://img.alicdn.com/imgextra/i2/2406102577/TB2E3IXdFXXXXXbXpXXXXXXXXXX_!!2406102577.jpg" class="bg" id="bgc" />
<img src="https://img.alicdn.com/imgextra/i3/2406102577/TB2M9.idFXXXXbbXXXXXXXXXXXX_!!2406102577.jpg" class="bg" id="bgd" />
<img src="https://img.alicdn.com/imgextra/i2/2406102577/TB2VEZidFXXXXbbXXXXXXXXXXXX_!!2406102577.jpg" class="bg" id="bge" />
</div>
</body>
</html>

CSS3动画完。

CSS3 动画记的更多相关文章

  1. 【转】CSS3动画帧数科学计算法

    本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————–     华丽丽的开篇     ...

  2. 浅谈CSS3动画的凌波微步--steps()

    背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

  3. CSS3动画那么强,requestAnimationFrame还有毛线用?

    一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...

  4. CSS3动画那么强,requestAnimationFrame还有毛线用--摘抄

    CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...

  5. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  6. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  7. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  8. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  9. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

随机推荐

  1. curl用法

    简介 curl是一个和服务器交互信息(发送和获取信息)的命令行工具,支持DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS, LDAP, L ...

  2. java的BigDecimal

    java的BigDecimal 一般设计到高精度的加法或乘法或者阶乘的求和积都会用到BigDecimal这个类. import java.util.*;import java.math.BigDeci ...

  3. cocos2d-x CCScale9Sprite

    转自:http://www.cocos2dev.com/?p=295 前段时间看CCEditBox的时候,发现里面有个利用9宫格图缩放图片的,也就是缩放带圆角的图片. 这个比较有用处,很多游戏中有很多 ...

  4. 用Eclipse来开发STM32

    先贴一个官方说明文档:http://www.keil.com/support/man/docs/ecluv/default.htm

  5. VS DLL 复制本地

    1.引用一个DLL,需要指定路径,复制本地的意思是 把这个DLL复制到exe的Debug目录(调试的时候). 2.复制到本地的动作是在生成的时候执行的,清理的时候会删除. 3.从外部引用一个DLL,不 ...

  6. IOS 手绘地图导航

    手绘地图导航 第三方库 NAMapKit, 1)支持在手绘图上标记.缩放 2)支持在单张图片 3)支持瓦片小图片 思路 前提:美工已经切好手绘图,并告知我们当前的缩放级别. 1)确定好手绘图左上角点在 ...

  7. iOS开发——UI_swift篇&UItableView实现移动单元格

    UItableView实现移动单元格   1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,可以看到单元格后面出现 ...

  8. Centos 6.5使用Bumblebee关闭N卡,冷却你的电脑

    夏天来了,笔记本装的Centos一直非常热.随着天气的变化,这个问题真的要攻克了.差了下原因可能是双显卡笔记本,N卡驱动不完好,导致风扇狂叫. 昨天安装了nvidia 的显卡驱动本以为时间安静了.但是 ...

  9. oc-04-类的声明和实现

    //main.m //10-[掌握]类的声明和实现 //.h为类的声明,.m为类的实现,+表示类方法静态方法,-表示对象方法..h文件中的方法都是public不能更改的.变量3中访问域:public, ...

  10. show engine innodb status解读

    xiaoboluo768   注:以下内容为根据<高性能mysql第三版>和<mysql技术内幕innodb存储引擎>的innodb status部分的个人理解,如果有错误,还 ...