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. 理解CSS中BFC

    BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...

  2. 移植DNS服务bind

    移植DNS服务bind 标签: makefile工作linuxbuildgcc工具 先写用于DNS的bind. 一. 移植环境 1 .硬件环境: Host : X86 PC Target : MPC8 ...

  3. 简单记事本程序java源码项目

    代码如下 import java.awt.*; import java.io.*; import java.awt.datatransfer.*; import java.awt.event.*; p ...

  4. 一款安卓ShowcaseView视图源码效果

    该源码是从源码天堂那边转载过来的,大家可以看看一下吧啊,一款安卓ShowcaseView视图源码效果,非常不错的,特别是在做引导时使用. 源码下载地址:http://code.662p.com/vie ...

  5. Linux rename命令

    转载:http://blog.csdn.net/sea_shore/article/details/6102437 1.rename命令批量修改文件名, 其实linux下可以使用别的办法来批量修改文件 ...

  6. 安装 centos7 注意事项

    最近一直没有写博客,把之前的折腾记录写下. 1 下载好镜像文件,刻录光盘. 2  用DVD安装CENTOS7 3 有些处理器不支持Cento7安装,需要重新编译内核文件.我不懂 . 我用的ACER  ...

  7. 无法运行maven项目

    tomcat Server Location 选择 User Tomcat installation 设置CATALINA_HOME环境变量(tomcat start.bat启动不了)1.CATALI ...

  8. 一个特别不错的jQuery快捷键插件:js-hotkeys

    这其实不是什么新技术,这个插件在很早前就已经发布了,之前有项目用到,所以分享出来添加方式的例子 jQuery.hotkeys.add('esc',function (){ //执行函数 }); jQu ...

  9. 用web查看hadoop运行状态

    转载--http://www.weixuehao.com/archives/621 我们安装完hadoop,下面我们从视觉上看看hadoop怎么玩的. 我们可以在win7系统上,通过web界面,在浏览 ...

  10. Linux平台下：块设备、裸设备、ASMlib、Udev相关关系

    对磁盘设备(裸分区)的访问方式分为两种:1.字符方式访问(裸设备):2.块方式访问 Solaris平台 : 在Solaris平台下,系统同时提供对磁盘设备的字符.块方式访问.每个磁盘有两个设备文件名: ...