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

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. 理解class.forName()

    使用jdbc方式连接数据库时会使用一句代码Class.forName(String className).这句话是什么意思呢?首先说一点Class.forName(String className)这 ...

  2. 【ALearning】第三章 Android基本常见控件

    本章主要介绍主要的寻常较多使用的控件,包含TextView.EditView.ImageView.Button等.本章将介绍相关控件基本属性的使用,为以后章节的进阶学习提供基础.案例中引用的Linea ...

  3. UVA - 10883 Supermean

    Description Problem F Supermean Time Limit: 2 second "I have not failed. I've just found 10,000 ...

  4. pomelo 开发环境搭建

    开发前提条件:  Windows系统,请确保你的Windows系统包括源代码编译工具.Node.js的源代码主要由C++代码和JavaScript代码构成,可是却用gyp工具来做源代码的项目管理,该工 ...

  5. UITableViewCell 高度自适应

    UITableViewCell 高度自适应一直是我们做动态Cell高度时遇到的最烦躁的问题,Cell动态高度计算可以去看看sunny的这篇文章介绍,今天主要和大家分享下我在使用systemLayout ...

  6. android学习日记22--Animation动画简介

    Animation动画主要有两种:帧动画(Frame Animation)和补间动画(Tween Animation).补间动画主要包括对位置.角度.尺寸等属性的变化,而帧动画则是通过若干帧图片轮流切 ...

  7. mysql replication inside

    http://keithlan.github.io/2015/07/16/mysql_replication_inside/

  8. 《Maven_孔浩》Maven介绍及安装

    maven是apache基金会下的一个项目管理工具. 安装步骤 1.下载并解压 2.配置环境变量M2_HOME(解压后的目录):将M2_HOME\bin加入到PATH环境变量中 3.测试:在命令行输入 ...

  9. sysctl

    /proc/sys目录下存放着大多数内核参数,并且可以在系统运行时进行更改,不过重新启动机器就会失效./etc/sysctl.conf是一个允许改变正在运行中的Linux系统的接口,它包含一些TCP/ ...

  10. 分布式算法(一致性Hash算法)

    一.分布式算法 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法( ...