自定义动画

由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下:

前缀

浏览器
 -webkit  chrome和safari
 -moz  firefox
 -ms  IE
 -o  opera

1. animation-name(动画名称):
语法:animation-name :none | <identifier>

说明:元素所应用的动画 名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

div{ animation-name : FromLeftToRight; }

2. keyframes (关键帧):

语法:@keyframes <identifier> { [ from | to | <percentage> ]{ sRules } ] [,*]}

说明:被称为关键帧,其类似于 Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是 动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则

@keyframes FromLeftToRight{
  from {left:; }
  to {left: 800px; }
}

3. animation-duration(动画时间):

语法:animation-duration:<time>
说明:设置对象动画的持续时间

div{ animation-duration:1s }

4. animation-timing-function(动画的过渡速度):

语法:animation- timing-function: ease | linear | ease-in | ease-out | ease-in- out

说明:设置对象动画的过渡速度类型

ease:默认值,逐渐变慢
linear:匀速过渡效果
ease-in:加速的过渡效果
ease-out:减速的过渡效果
ease-in-out:加速然后减速

div{ animation-timing-function : ease-in; }

5. animation-delay(动画延迟时间):

语法:animation-delay:<time>

说明:设置对象动画的延迟时间

div{ animation-delay : ease-in; }

6. animation-iteration-count(动画执行次数):

语法:设置对象动画执 行次数

说明:animation-iteration-count:infinite | <number>

infinite表示无限次数

div{ animation-iteration-count :; }

7. animation-direction(动画的顺序):

语法:animation-direction: normal | reverse | alternate | alternate-reverse

说明:设置对象动画在循环中是否按照相反顺序执行

normal:正常方向

reverse:反方向运行

alternate:动画先正常运行再反方向运行,并持续交替运行

alternate-reverse:动画先反运行再正方向运行,并持续交替运行

div{ animation-direction : normal; }

8. animation-play-state(动画的状态):

语法:animation-play-state:running(运动) | paused(暂停)

说明:设置对象动画的状态

div:hover{ animation-play-state:paused; }

9. animation-fill-mode(动画时间之外的状态):

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

说明:设置对象动画时间之外的状态

none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态

div { animation-fill-mode : both; }

10. animation(动画复合属性)

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

div{ animation: FromLeftToRight 2s ease-out forwards; }

CSS3初学篇章_6(自定义动画)的更多相关文章

  1. CSS3初学篇章_5(背景样式/列表样式/过渡动画)

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  2. CSS3初学篇章_2(伪类选择符)

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  3. Javascript初学篇章_6(BOM)

    BOM 浏览器对象模型 BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象 一.window对象 Window对 象表示整个浏览器窗口. 1.系统消息框 alert() alert('he ...

  4. CSS3初学篇章_7(布局/浏览器默认样式重置)

    CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...

  5. CSS3初学篇章_4(边框样式/段落样式)

    边框样式 1.边框线语法:border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inse ...

  6. CSS3初学篇章_3(属性选择符/字体样式/元素样式)

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  7. CSS3初学篇章_1

    CSS 层叠样式表 不同的浏览器需要不同的前缀,虽然目前最新版本的浏览器的不需要,但为了向下兼容,前缀还是少不了. 前缀 浏览器  -webkit  chrome和safari  -moz  fire ...

  8. CSS3 自定义动画(animation)

    除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transfor ...

  9. velocity自定义动画

         话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录.        废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...

随机推荐

  1. TCP拆包粘包之分隔符解码器

    TCP以流的方式进行数据传输,上层的应用协议为了对消息进行区分,往往采用如下4种方式. (1)消息长度固定,累计读取到长度总和为定长LEN的报文后,就认为读取到了一个完整的消息:将计数器置位,重新开始 ...

  2. 转:ExpressBars中的停靠控件使用

    http://www.cnblogs.com/jxsoft/archive/2011/08/25/2152872.html 1          新手上路 1.1      控件简介 Dock pan ...

  3. PHP历程(封装的增删改查方法)

    db.class.php   主要方法 <?php /** * 数据库配置信息 */ define('DB_HOST','127.0.0.1'); //服务器 define('DB_USER', ...

  4. DataTable过滤重复字段

    有时我们需要从DataTable中抽取Distinct数据,以前总是以对DataTable进行foreach之类纯手工方式获取. 近来发现DataView可以帮我们直接获取Distinct数据,汗一个 ...

  5. ural 2068. Game of Nuts

    2068. Game of Nuts Time limit: 1.0 secondMemory limit: 64 MB The war for Westeros is still in proces ...

  6. CF#335 Freelancer's Dreams

    Freelancer's Dreams time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. 连连看[HDU1175]

    连连看 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  8. ccc 调试方法

    当修改完一个函数,但是不知道哪个函数调用的时候没有传递正确的参数的时候 需要找出调用这个函数的所有语句,于是我注释掉这个函数就可以了

  9. BZOJ1950 : [Ceoi2006]Link

    显然在最优解中,添加的边都是从$1$出发的. 这个图是一个环套树的结构,对于树的部分,显然叶子节点必须加边. 因此可以自底向上确定树中哪些节点需要加边,同时得到$1$到环上每个点的距离. 对于每个环, ...

  10. jquery属性过滤选择器

    http://www.jb51.net/article/46279.htm   $("div[id]").addClass("highlight"); //查找 ...