CSS3 animation-fill-mode 属性
现在专注于移动端开发项目，对于动画这个点是非常重要的，每当我遇到一个新的知识点，我就会和大家一起分享
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 属性的更多相关文章
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS3 animation（动画） 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- 深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- HTML 学习笔记 CSS3(Animation)
CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 第四十一课：CSS3 animation详解
animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- 制作动画效果：《CSS3 Animation》
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
随机推荐
- Linux开发环境搭建与使用——ubuntu更新设置
ubuntu操作系统公布时,为了减小操作系统的体积,只配备了主要的系统软件.应用软件.我们开发中须要用到的大部分软件都须要在使用中从网上自行更新. 假设ubuntu没有网络,能够说寸步难行. 以下教大 ...
- leetcode解决问题的方法||Integer to Roman问题
problem: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range ...
- android学习日记24--Android 菜单开发
菜单是任何应用程序必不可少的一项.按下Menu键或者长按某个View就会弹出相应菜单,当然前提是应用程序有实现菜单功能. Android平台下的菜单有:Options Menu(选项菜单).Subme ...
- Linux中的文件描述符与打开文件之间的关系------------每天进步一点点系列
http://blog.csdn.net/cywosp/article/details/38965239 1. 概述 在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录文件. ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- 记一次大量 TCP 连接失败
背景 在一段没有日志的历史遗留代码上面加入监控部署后不久,就收到了服务调用成功率低的告警,真是哗了狗了 解决过程 client端在线上单机部署,根据监控上面的返回码比例看出失败原因都是链接失败,通过 ...
- 【原】Spring与MongoDB集成：配置
MongoDB的API提供了DBObject接口来实现BSONObject的操作方法,BasicDBObject是具体实现.但是并没有提供DBObject与BeanObject的转换.在还没有了解到与 ...
- centos 7 下modelsim10.2c安装教程
step1: chmod +x ./install.linux(但是没有任何反应,原因是install.linux是32位程序,系统是64位的,所以要安装相应的库){ yum install glib ...
- Flash cs6 帧上的菱形原来是关键帧
假如需要删除这个关键帧,选中它,然后右键,"清除关键帧",相应的类型即可. 因为之前学了一点点Flash,没见过帧上面这个菱形图标,才知道是关键帧.
- 调用java的webservice返回null
When you try invoke a Java/Axis Web Service from a proxy class generated by Visual Studio 2005 or Vi ...