animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。

关于这三个，很好理解；具体请看demo

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <link rel="stylesheet" href="">

    <style>

    *{margin: 0; padding: 0;}

    .box{width: 100px; height: 100px; background: red; border-radius: 50%;  opacity: 0.5; animation: paly 2s linear backwards }

      @keyframes paly{

          0%{-webkit-transform: scale(0.5,0.5);

          -ms-transform: scale(0.5,0.5);

          -o-transform: scale(0.5,0.5);

          transform: scale(0.5,0.5);}

          100%{

              -webkit-transform:scale(0,0);

              -ms-transform:scale(0,0);

              -o-transform:scale(0,0);

              transform:scale(0,0);

          }

      }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

这是一个大小匀速变化的圆，当animation的填充模式为backwards的时候，可以看到，小圆缩小后直至没有了，说明保持了最后一帧；当animation的填充模式为forwards的时候，则相反；当animation的填充模式为both的时候，第一帧和最后一帧都保留；

css3 forwards、backwards、both的更多相关文章

  1. CSS3 过渡、动画、多列、用户界面

    CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...

  2. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  3. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  4. CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局

    1.左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 CSS中的3D坐标系 CSS ...

  5. CSS3中的过渡、动画和变换

    一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...

  6. CSS3动画与2D、3D转换

    一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition- ...

  7. CSS3 变形、过渡、动画、关联属性浅析

    一.变形 transform:可以对元素对象进行旋转rotate.缩放scale.移动translate.倾斜skew.矩阵变形matrix.示例: transform: rotate(90deg) ...

  8. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

随机推荐

  1. java值得注意的几个问题

    1.一个源文件中只能有一个类是public的,其他的都是默认权限的: 2.一个类只能作为public或者默认权限(就是没有修饰符的意思): 3.源文件的public类的名字必须要跟文件名保持一致,否则 ...

  2. CSS3 图片悬浮缩放效果

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. shell脚本定时操作数据库

    一.数据库脚本(mysql.sh) Linux环境下,定时将数据库A的表格复制到数据库B中 #!/bin/bash mysql_host="127.0.0.1" mysql_use ...

  4. 代码快捷键的设置读取App.config方法

    附件下载:http://files.cnblogs.com/files/qtiger/ShortcutAchieve.zip 代码实现最重要(增加引用using System.Configuratio ...

  5. php常用函数集锦[备份用的]

    1.判断是否正确的日期格式 /** * 是否正确的日期 * * @access public */ private function _isdate($str,$format="Y-m-d ...

  6. 【转】mysql字符串函数

    对于针对字符串位置的操作,第一个位置被标记为1(即:第一个字母索引为1). ASCII(str) 返回字符串str的 最左面字符的ASCII代码值.如果str是空字符串, 返回0.如果str是NULL ...

  7. int 类型 占多少字节是由什么决定的

    int 类型占据多少字节?到底是跟编译器有关?还是系统来决定的? 1. CPU的设计者才不管你在上面跑什么程序.他们只是按着他们的想法来设计.而int的大小,至少在C/C++中,标准只说可以由实现者自 ...

  8. ViewPage显示Fragment集合实现左右滑动并且出现tab栏--第三方开源--SlidingTabLayout和SlidingTabStrip实现

    注意:有关Fragment的方法和ViewPager的全部是android.support.v4包的,否则会报很多的错误 MainActivity: package com.zzw.fragmentt ...

  9. 14）Java中Assert

    J2SE 1.4在语言上提供了一个新特性,就是assertion(断言)功能,它是该版本在Java语言方面最大的革新.在软件开发中,assertion是一种经典的调试.测试方式. jvm 断言默认是关 ...

  10. jqGrid根据ID获取行号

    根据行号获取ID $('#grid').getCell(rownumber,'id') 根据ID获取行号 $('#' + rowid)[0].rowIndex