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. Unity3D学习笔记——选择Enemy

    一.步骤: 1.创建三个Cube,并将这三个Cube的Cube的Tag设为Enemy 2.导入第一人称视角的资源 3.创建名为Targeting的C#脚本 4.编写Targeting脚本,并将它附到第 ...

  2. SRM 410(1-250pt, 1-500pt)

    DIV1 250pt 题意:对于图G,有一些点和边,点中有一些点称为特殊点.问在所有特殊点最终不能处于同一个联通块的条件下,最多能给在图G中添加多少条边. 解法:首先,对于图G,处理出它有哪些联通块, ...

  3. appium api

    AppiumDriver getAppStrings()      默认系统语言对应的Strings.xml文件内的数据.iOS driver.getAppStrings(Stringlanguage ...

  4. C# 获取网页数据、获取本机IP 分类: C# 2014-12-16 14:59 308人阅读 评论(0) 收藏

    说明: (1) http://www.3322.org/dyndns/getip 这个网址可以获取本机IP,读取的内容就是本机IP (2)方法经测试,可以实现. (3)参考:http://www.cn ...

  5. Partition算法剖析

    博文链接:http://haoyuanliu.github.io/2016/12/18/Partition%E7%AE%97%E6%B3%95%E5%89%96%E6%9E%90/ 对,我是来骗访问量 ...

  6. javascript数组基本方法

    一.数组方法 1)concat 该方法用于连接两个或多个数组,返回连接成的新数组的副本,不会改变现有数组 [1,2,3].concat(5,6);//返回[1,2,3,5,6] 2)join 用于把数 ...

  7. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. cubieboard变身AP 分类: ubuntu cubieboard 2014-11-25 14:04 277人阅读 评论(0) 收藏

    加载bcmdhd模块:# modprobe bcmdhd 如果你希望开启 AP 模式,那么:# modprobe bcmdhd op_mode=2 在/etc/modules文件内添加bcmdhd o ...

  9. SystemTap----常用变量、宏、函数和技巧

    http://blog.csdn.net/moonvs2010/article/category/1570309

  10. IOS 播放动态Gif图片

    图片分为静态和动态两种,图片的格式有很多种,在开发中比较常见的是.png和.jpg的静态图片,但有的时候在App中需要播放动态图片,比如.gif格式的小表情头像,在IOS中并没有提供直接显示动态图片的 ...