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. oracle11g ORA-12505

    对于这个问题我前一天还可以用的,第二天打开就报这个错误了. 我在网上找了很多方法,大多为修改/listener.ora这个文件里的SID,修改后也没弄好. 我的解决方法很简单, 打开Oracle Ne ...

  2. Unable to add App ID because the '10' App ID limit in '7' days has been exceeded.

    Unable to add App ID because the '10' App ID limit in '7' days has been exceeded. 官方的原因是对bundle iden ...

  3. idea类似eclipse鼠标提示java api信息

    <ignore_js_op> 详细说明:http://java.662p.com/thread-2615-1-1.html

  4. bootstrap中弹出窗体dialog的自定义

    感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog 根据需要弹出窗体,但是可以移动,不遮挡下面的内容,所以就修改了源代码,添加了一个属 ...

  5. LINUX下网站压力测试工具webbench

    wget http://blog.s135.com/soft/linux/webbench/webbench-1.5.tar.gz tar zxvf webbench-1.5.tar.gz cd we ...

  6. mysql中character_set_connection的作用

    character_set_client = x character_set_results = xcharacter_set_connection = x; 我们常用在mysql操作类中使用这三面, ...

  7. MYSQL 管理笔记(一)

    一.查看MySQL 版本   1.在终端下:mysql -V   2.在mysql中:mysql> status; 3:在help里面查找   mysql --help | grep Distr ...

  8. 通过JAVA代码获取手机的一些基本信息（本机号码，SDK版本，系统版本，手机型号）

    代码如下: package com.zzw.getPhoneInfos; import android.app.Activity; import android.content.Context; im ...

  9. 共享内存shared pool （4）：Library cache 转储文件

    上一篇blog只是从概念上理解Library cache,本篇则是将Library cache从内存中dump出来,看看其结构. 基本命令 ALTER SESSION SET EVENTS 'imme ...

  10. Simplified Memory Modle C/C++内存模型

    最近学习c++看视频时,老师时常提到栈区堆区,搞不清楚,只能泪目,毕竟爱过...因此,接下来对此做些整理,方便回顾.(老师说:这个简化模型仅用于初学者示意,与实际模型并不完全一致) 1.stack(栈 ...