Internet Explorer 9,以及更早的版本,

不支持 @keyframe 规则或 animation 属性。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性

Chrome和Safari需要前缀-webkit- 

@keyframes(关键帧)

animation 使用规则,Name must,duration must

Animation turn 顺序

animation   所有动画简写,除了animation-play-state

 1、name                   动画名

 2、duration               动画执行(一个周期)时长       默认值:  0

 3、time-function        动画速度曲线                        默认值: ease

 4、delay                    动画何时开始                         默认值: 0

 5、iteration-count      动画被播放的次数                  默认值: 1

 6、direction               动画在下一周期是否逆向播放    默认值: normal

 7、play-state             规定动画是否正在在运行或暂停 默认值:running

 8、fill-mode               规定动画时间之外的状态 

悟性差,记忆差,所以多记记笔记了,必须重新过几遍

概念链接:http://www.w3school.com.cn/css3/css3_animation.asp

CSS3 Animation学习笔记的更多相关文章

  1. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  2. 《The Book of CSS3》学习笔记

    一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...

  3. css3 animation 学习

    css3中可以实现动画效果,主要是通过css3中新增加的属性(transform , transition,animation )来完成. 他们的详细解释可以参考 W3CSCHOOL 下面是效果图: ...

  4. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  5. CSS3选择器学习笔记

    CSS选择器总结: 一.基本选择器 1.通配选择器:[  *  ]        选择文档中所以HTML元素. *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置marg ...

  6. Android Animation学习笔记

    原文地址: http://www.cnblogs.com/feisky/archive/2010/01/11/1644482.html 关于动画的实现,Android提供了Animation,在And ...

  7. Android animation学习笔记之view/drawable animation

    前一章中总结了android animation中property animation的知识和用法,这一章总结View animation和Drawable animation的有关知识: View ...

  8. css笔记 - animation学习笔记(二)

    animation动画 @keyframes规则 - 创建动画 from - to 等价于 0% - 100% 但是优先使用0% - 100%,因为浏览器兼容性还好点 animation 动画绑定 将 ...

  9. Animation学习笔记

    关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移.缩放. ...

随机推荐

  1. 将cocos的app直接在我的设备上测试运行

    首先,你要有一个写好了的,准备在真机上测试的cocos程序. 1.设置ARC,设置的过程在另外一篇博文上有写. 2.在Target的Build Setting里面 找到Valid Archs 删除里面 ...

  2. 把测试app打包成ipa文件

    我终于把我的程序放到我的touch上了,其实把app放到touch上还有很多办法,这篇教程是主要讲怎么把app注册了,然后打包成一个ipa文件的. 先上官方文档:https://developer.a ...

  3. php将SQL查询结果赋值给变量

    2012-03-25 12:12 a786013819 | 分类:数据库DB | 浏览1393次 $sql = "select field1 from pre_common_member_p ...

  4. if form1.showmodal:=mrok then 什么意思

    if form1.showmodal:=mrok then 这句话什么意思? 最佳答案 这个问题说来话长,且听我慢慢道来... 首先,你仔细看一看,所有的命令按钮(不论是Button还是BitBtn) ...

  5. linux下配置固定ip

    今天在VM上装linux6.3,装的时候没有配置ip,虚拟机连接方式选的NAT方式,可以直接上网.我装这几次虚拟机系统只有这次虚拟机上去网了,挺爽.但是问题又出来了,就是我本机Windows远程不上虚 ...

  6. 更改Tomcat startup.bat启动窗口名称

    通常在Tomcat bin目录下用startup.bat启动Tomcat ,启动窗口显示的Title是Tomcat 如果遇到一个服务器上多个Tomcat的话就会容易混淆.更改方法如下: 1 在bin目 ...

  7. bzoj3907: 网格

    http://www.cnblogs.com/Tunix/p/4354348.html #include<cstdio> #include<cstring> #include& ...

  8. 某返利网站admin目录index.php文件混淆加密算法分析

    ---恢复内容开始--- 文件已经加密,可以在此下载:index.php 文件内容打开大概如此: 简单字符替换之后,发现字符串用base64_decode仍无法解码. 找到一个解码网站:找源码 解码后 ...

  9. 四种数据持久化方式(下) :SQLite3 和 Core Data

    在上文,我们介绍了iOS开发中的其中2种数据持久化方式:属性列表.归档解档. 本节将继续介绍另外2种iOS持久化数据的方法:数据库 SQLite3.Core Data 的运用: 在本节,将通过对4个文 ...

  10. (转)兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...