现在专注于移动端开发项目，对于动画这个点是非常重要的，每当我遇到一个新的知识点，我就会和大家一起分享

animation-fill-mode :把物体动画地从一个地方移动到另一个地方，并让它停留在那里

定义和用法

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

默认值： none
继承： 否
可动画化： 否。
版本： CSS3
JavaScript 语法： object.style.animationFillMode="forwards"

特别是对于JS控制这一块，还可以将其恢复到最后一个关键帧完成后停止影响的状态

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background: red;

            position: relative;

            animation:move 2s linear;

        }

        @keyframes move {

            from{

                left:0;}

            to{

                left:100px;

            }

        }

    </style>

</head>

<body>

     <div id="div"></div>

     <button>试一试</button>

     <script>

         window.onload = function(){

             var div = document.getElementById("div")

             var btn = document.getElementsByTagName("button")[0]

             btn.onclick = function(){

                 div.style.animationFillMode = "forwards"

             }

                         //把动画状态恢复到最后一帧的状态

         }

     </script>

</body>

</html>

CSS3 animation-fill-mode 属性的更多相关文章

  1. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  2. CSS3 animation（动画） 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  3. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  4. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  5. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  6. HTML 学习笔记 CSS3(Animation)

    CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 第四十一课：CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

  9. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  10. 制作动画效果：《CSS3 Animation》

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

随机推荐

  1. 应用之星推出“图文app”制作工具，并附上教程

    应用之星已推出的"图文"app制作工具,是高速制作图文电子书,图文杂志等一切有关图文资料的app生成工具,以下跟大家介绍"图文"制作教程,简单快捷,大致分三大步 ...

  2. mysql使用心得

    SET FOREIGN_KEY_CHECKS=0; -- ------------------------------ Table structure for `staff`-- ---------- ...

  3. 使用CompletionService结合ExecutorService批处理任务

    CompletionService用于提交一组Callable任务,其take方法返回已完成的一个Callable任务对应的Future对象. 如果你向Executor提交了一个批处理任务,并且希望在 ...

  4. Redis集群

    一.Redis集群原理 集群技术是构建高性能网站架构的重要手段,试想在网站承受高并发访问压力的同时,还需要从海量数据中查询出满足条件的数据,并快速响应,我们必然想到的是将数据进行切片,把数据根据某种规 ...

  5. rownum与rowId

      一.RowNum Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条rownum=1, 第二条=2. 对于 Oracle 的 rownum 问题,很多资料都说不支持 ...

  6. 在安卓下使用python连接蓝牙串口模块(HC-06)

    在安卓上安装Python: 请参考:https://github.com/kuri65536/python-for-android/blob/master/README.md下载程序文件需要访问 ht ...

  7. 组装和拆分JSON

    1.组装JSON                     rs["msg"] = "success";                     rs[" ...

  8. tlb，tlh，tli文件的关系

    tlb文件:com类型库文件.在需要使用对应com类的模块里,“#import ...*.tlb”使用之. tlh.tli文件:他们是vc++编译器解析tlb文件生成的标准c++文件.因为odl和tl ...

  9. ASP.NET MVC模型绑定的6个建议（转载）

    ASP.NET MVC模型绑定的6个建议 发表于2011-08-03 10:25| 来源博客园| 31 条评论| 作者冠军 validationasp.netmvc.netasp 摘要:ASP.NET ...

  10. WebService简单介绍

    什么是Web Services 一直没有一个明确的答案,最近听了一个大牛讲WebService,顿时明了了,作个记录免得以后忘了. N年之前,各公司都在炒作SOA,不过现在已经没人再提了,现在都改叫W ...