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. thinkphp数据库添加表单提交的数据

    $data['catename'] = I('catename');     获取表单的数据 $cate=D('cate');                               实例化cat ...

  2. C/C++下Netbeans的配置

    目录 目录1 1 netbeans开发环境搭建2 2 netbeans工程管理2 2.1 采用IDE自动生成Makefile2 3 netbeans工程配置2 3.1 编译工具链3 3.1.1 添加配 ...

  3. Nginx 开启 path_info功能

    server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...

  4. basis基本tcode

    SM21 ST11     SM50 查看work process 使用情况 操作相关的查询功能     SM## 常用tcode     SM01 锁定事务 SM04 用户清单 SM05 HTTP ...

  5. JS日期(Date)处理函数总结

    获取日期 1.Date() ——返回当日的日期和时间. 2.getDate() ——从 Date 对象返回一个月中的某一天 (1 ~ 31). 3.getDay() ——从 Date 对象返回一周中的 ...

  6. Objective-C介绍

    概述 2007年苹果公司推出了Objective—C 2.0,它是Mac OS X和iOS开发的基础语言.

  7. winform 打包部署

    1.使用VS 自带的打包工具,制作winform安装项目 开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 步骤: 第一步:打开开发环境VS2008,新建项目,选 ...

  8. Dev的DocumentManager 相关问题

    1.改变DocumentManager包含的窗体的排列方式 if (this.documentManager1.View.Type != ViewType.NativeMdi) { this.docu ...

  9. Silverlight读取Zip文件中的图片与视频

    首先看看Demo的截图: 下面我将一步步展示实现这个Demo的过程,这个需求就是读出Zip文件中的图片与视频. Demo整体架构: 首先我们准备几张图片和视频,然后将其压缩至resource.zip文 ...

  10. java高级工程师必备知识

    成为Java高级工程师需要掌握哪些核心点? 每 逢长假都会有很多程序员跳槽,十一.过年是跳槽黄金时刻,尤其是过年.过年的时候年终奖到手,没有了多少牵挂,年终同学同事聚会比较多,沟通的就多,各种 工作机 ...