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. php mkdir函数

    if(!is_dir($targetPath)){mkdir($targetPath, 0700); } is_dir 判断目录是否存在 mkdir 不能创建多级目录

  2. .NET验证码控件（美观 易用）

    新建一般处理程序:veify.ashx <%@ WebHandler Language="C#" Class="verify" %> using S ...

  3. 打包新版本上传到AppStore时报错 ERROR ITMS-90034:

    今天打包新版本上传到AppStore时报错 ERROR ITMS-90034:"Missing or invalid signature.The bundle'com.xxx.xxx' at ...

  4. Android数据库(sqlite)加密方案

    最近因为一些项目的安全性需要将数据库加密,一开始想到的就是先将数据库通过AES加密,然后运行时再解密,另一种是将数据库里的内容加密. 很快这两种方案都是不理想的,第一种加密方式形同虚设,第二种,如果加 ...

  5. 【转】Linux模式设计5-位图操作

    通过位图提供的两种状态可以在非常节约内存的情况下表示开关变量,并且同类这类变量可以紧凑而高效的统一进行处理.有很多内核子系统都需要位图的支持,但是不同的情况又需要不同的位图个数,比如SMP系统上的CP ...

  6. 软件工程 speedsnail 第二次冲刺8

    20150525 完成任务:障碍物整体设计,实现一页多次布局: 遇到问题: 问题1 与现有资源冲突 解决1 未解决 明日任务: 蜗牛碰到线后速度方向的调整:(做优化)

  7. [转载]AppSettings和ConnectionStrings的区别

    AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...

  8. sqoop简单import使用

    一.sqoop作用? sqoop是一个数据交换工具,最常用的两个工具是导入导出. 导入导出的参照物是hadoop,向hadoop导数据就是导入. 二.sqoop的版本? sqoop目前有两个版本,1. ...

  9. phpcms v9 中get的mysql查询表某字段最大值数据，表某字段不重复数据

    直切正题 1.表tb中字段num最大的数据 {pc:get $sql="select * from tb where num=(select MAX(num) from tb)"} ...

  10. 【转】代码编辑器（一）-TSynCompletionProposal用法

    注意,本系列均转载自http://blog.163.com/zom1995@126/ 网上有人给我一个SynEdit这个东西,因为我很喜欢自己编个代码编辑器,但要是用Delphi直接弄的,就我现在这样 ...