CSS3 animation-fill-mode 属性
2016-02-18 12:01
519 查看
现在专注于移动端开发项目,对于动画这个点是非常重要的,每当我遇到一个新的知识点,我就会和大家一起分享
animation-fill-mode :把物体动画地从一个地方移动到另一个地方,并让它停留在那里
默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
特别是对于JS控制这一块,还可以将其恢复到最后一个关键帧完成后停止影响的状态
animation-fill-mode :把物体动画地从一个地方移动到另一个地方,并让它停留在那里
定义和用法
animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
默认值: | none |
---|---|
继承: | 否 |
可动画化: | 否。 |
版本: | CSS3 |
JavaScript 语法: | object.style.animationFillMode="forwards" |
<!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动画实例分段讲解
- Div和CSS编写中对包含选择器和通配选择器的使用
- 简要讲解CSS中的类型选择器、ID选择器、类选择器
- sencha touch2.4.2的样式
- 常用js,css
- css实现绝对定位元素居中
- 第 5 章 固定层效果
- CSS浮动原理
- IOS设置状态栏样式和背景
- DIV+CSS 命名规范
- 文字多行缩进 css 兼容浏览器
- 各种居中系列
- 有用的css代码段
- js获取样式、currentStyle和getComputedStyle的兼容写法
- NEC css规范
- css的text-indent属性实现段落第一行缩进
- CSS水平居中和垂直居中解决方案(转)
- CSS中边框使用负边距值的奇技淫巧
- 自定义按钮样式
- css设置各种中文字体如雅黑、黑体、宋体、楷体等等