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

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. nonce和timestamp在Http安全协议中的作用

    前段时间给客户网站做新浪微博账号登录功能,对OAuth协议以及相关的一些安全协议做了一些研究,顺便就记录一下学习心得吧.在这里就不打算具体讲OAuth的协议流程了,而是针对OAuth请求头里的nonc ...

  2. unity3d 中加入�视频

    加入�音频 视频 using UnityEngine; using System.Collections; public class play_video : MonoBehaviour { publ ...

  3. android学习日记19--四大组件之Services(服务)

    一个Android应用主要由四个基本组件组成,Android四大基本组件分别是Activity,Content Provider内容提供者,Service服务,BroadcastReceiver广播接 ...

  4. python第三方库系列之十九--python測试使用的mock库

    一.为什么须要mock         在写unittest的时候,假设系统中有非常多外部依赖,我们不须要也不希望把全部的部件都执行一遍.比方,要验证分享到微博的功能,假设每次測试的时候都要真实地把接 ...

  5. string中find函数的使用

    9.47 编写程序,首先查找string"ab2c3d7R4E6"中的每个数字字符,然后查找其中每个字母字符.编写两个版本的程序,第一个要使用find_first_of,第二个要使 ...

  6. debian 系统备份

    tar -zcvpf /home/full-backup.tar.gz / --exclude=/mnt/* --exclude=/proc/* --exclude=/sys/* 这个命令是把根目录下 ...

  7. JVMInternals--reference

    This article explains the internal architecture of the Java Virtual Machine (JVM). The following dia ...

  8. Mybatis案例

    MyBatis MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索. MyBatis 可 ...

  9. iOS 中的 block 是如何持有对象的

    Block 是 Objective-C 中笔者最喜欢的特性,它为 Objective-C 这门语言提供了强大的函数式编程能力,而最近苹果推出的很多新的 API 都已经开始原生的支持 block 语法, ...

  10. Porsche Piwis Tester II “No VCI has been detected”,how to do?

    Hi,Joy, I am sorry that my Porsche Piwis Tester II from your shop said “No VCI has been detected” wh ...