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. int 和 long的区别

    数据模型决定了C语言中基本数据类型与数据宽度的对应关系.我们常用的32位模型称为ILP32,而64位模型有三种:LP64.LLP64和ILP64.在64位模型中,指针一定是64位的,但是int和lon ...

  2. PHP 小代码

    //获取网上的一个文件function getUrlImage($url, $file = '', $maxExe = 0, $safe = false){ $urlExt = explode('.' ...

  3. linux trap

  4. JavaScript 的 Date 最详细解读

    基础的 Date() 就不说了~ :  ) 如何获得某个月的天数? 不知道大家遇到过这个问题吗?我想如果你们写过日期组件一定有这个问题,我当时的解决方案是这样的: 以下的三个方法,month 参数我都 ...

  5. hdoj 1686 Oulipo【求一个字符串在另一个字符串中出现次数】

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  6. nORA-01000: 超出打开游标的最大数(SDE连接)

    1.运行ArcObjects代码报错: IFeatureCursor pCursor = null; try { pCursor = m_pCatchLayer.m_pFeatureClass.Sea ...

  7. Linux命令之hwclock - 查询和设置硬件时钟

    常用参数 -r, --show         读取并打印硬件时钟(read hardware clock and print result ) -s, --hctosys      将硬件时钟同步到 ...

  8. Android 官方命令深入分析

    原文:www.libgdx.cn Android SDK包括了多种工具来帮助你创建基于Android平台的移动应用.这些工具一般分成两类:SDK 工具和 platform 工具. SDK 工具是独立的 ...

  9. [Unity3D]Unity3D游戏开发之自己主动寻路与Mecanim动画系统的结合

    大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 这段时间博主将大部分的精力都放在了研究官方演示样例项目上,主要是希望能够从中挖掘出有价值的东 ...

  10. 关于TXT转CHM的完整解决方式

    为什么要转CHM? 有些书,TXT的资源非常好找,而CHM的资源非常难找(先不论PDF格式的,只是话说PDF格式的没有一个书签文件夹看起来也非常难受) 而CHM格式在左側有一个文件夹结构,我最喜欢这个 ...