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的朋友可能对这个东西并不会陌生.下面我们就一起 ...
随机推荐
- 启动hbase时，hregionserver没有启动的原因
今天配置hbase的时候发现有几台机器的regionserver启不来.报错例如以下: at sun.reflect.NativeConstructorAccessorImpl.newInstance ...
- IBM Rational ClearCase 部署指南
引言 随着时间的推移,可视化设计与软件配置管理(SCM)已经逐渐成为现代软件项目成功的关键因素.IBM Rational 是 IBM Rational XDE 和 IBM Rational Clear ...
- JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- Middleware
Middleware The middleware gives a single shot to the views associated into Controllers, before execu ...
- ping与telnet的区别
ping 查看某个IP地址是否有效.还可以得出解析IP..评估网络质量.telnet 查看可以PING通IP的机子上的某个端口是否可以进行访问(telnet IP port) ,如果连接失败,可能是防 ...
- 用java程序模拟网站的登录以及文件批量上传
import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.List; ...
- mysql中的存储过程和事务隔离
※存储过程存储过程是保存在数据库上的一段可执行代码.1.定义存储过程的语法是:Create procedure sp_name (参数..)Begin SQL语句End;2.调用它的方法:Call s ...
- React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...
- android.os.NetworkOnMainThreadException 异常处理
当我试图在UI线程(MainActivity)连接网络的时候,运行时抛出异常droid.os.NetworkOnMainThreadException 安卓的官方文档说 The exception t ...
- 关于MANIFEST.MF的理解
打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录,这个目录下会有一些文件,其中必有一个MANIFEST.MF,这个文件描述了该Jar文件的很多信息. 在Java平台中, M ...