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

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. Linux curl命令详解

    用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件.其实curl远不止前面所说的那些功能,大家可以通过man curl阅读手册页获取更多的信息.类 ...

  2. iOS开发——数据持久化Swift篇&模型对象归档

    模型对象归档 import UIKit class ViewController: UIViewController { @IBOutlet weak var textField: UITextFie ...

  3. java推断字符串是否为乱码

    项目中有一个功能 在IE中GET方式提交会产生乱码 但有两个入口都会走这同一段代码 固不能直接转码,所以要进行推断传过来的该值是不是乱码 可用下面方式验证: java.nio.charset.Char ...

  4. 安装完zend server后，无法访问http://localhost:10081/ZendServer/的解决办法

    安装完ZendServer后,默认会设置http://localhost:10081/ZendServer/为ZendServer的后台管理页面, 但对于ZendServer5.0.2(其它版本未知) ...

  5. Python built-in函数的源码实现定位

    http://blog.nsfocus.net/locate-python-built-in-function/

  6. C#_Ajax分页MVCPager

    UCJqOrderList @model PagedList<Order> <div id="dvOrders"> <table width=&quo ...

  7. java专业规划（转载）

    1. Java语言基础     谈到Java语言基础学习的书籍,大家肯定会推荐Bruce Eckel的<Thinking in Java>.它是一本写的相当深刻的技术书籍,Java语言基础 ...

  8. php面试常用算法

    这些都是真实的IT公司招聘PHP程序员的面试题,这些都是简单的基本算法.包括:冒泡算法.快速排序算法.二分查找算法.顺序算法. 冒泡排序,对象可以是一个数组 01 function bubble_so ...

  9. 简单改写SQL达到优化目的

    select * from (select t.row_id, t.supplier_name, t.tel, address, t.contact, t.contact_post, t.contac ...

  10. swift和oc区别----属性部分（参考官方swift2.1文档）

    对于实用过OC的人来说实用swift上手时非常容易的,swift包括了oc的大部分功能,但是swift毕竟是一门新的编程语言,它和OC还是 有很多不同的地方,而且提供了不少新功能,所以本人在读swif ...