如何理解animation-fill-mode及其使用?<转>
今天看了css3的动画,对animation
的其他属性都比较容易理解,唯独这个animation-fill-mode
让我操碎了心。
找了些下面的描述:
规定对象动画时间之外的状态。
有四个值可选,并且允许由逗号分隔多个值。
none
不改变默认行为。forwards
当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。backwards
在animation-delay
所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。both
向前和向后填充模式都被应用。
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
对于单个none
,forwards
,backwards
还可以勉强理解,对于其他的就晕菜了,希望有人指点一下(尽量说的通俗易懂点),最好配上示例或图例帮助理解。
解答:假设有一个盒子。
HTML:
<div class="box"></div>
CSS如下:
.box{
transform: translateY(0);
}
.box.on{
animation: move 1s;
}
@keyframes move{
from{transform: translateY(-50px)}
to {transform: translateY( 50px)}
}
使用图片来表示 translateY
的值与 时间 的关系:
横轴为表示 时间,为 0 时表示动画开始的时间,也就是向 box 加上 on 类名的时间,横轴一格表示
0.5s
纵轴表示
translateY
的值,为 0 时表示translateY
的值为 0,纵轴一格表示50px
animation-fill-mode: none
animation-fill-mode: backwards
animation-fill-mode: forwards
animation-fill-mode: both
如何理解animation-fill-mode及其使用?<转>的更多相关文章
- 优雅地实现CSS Animation delay
今天写一个css动画时遇到一个有意思的问题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画 ...
- 优雅地实现CSS Animation delay心得
话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个 ...
- WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
- WPF Step By Step 完整布局介绍
WPF Step By Step 完整布局介绍 回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的 ...
- java io系列12之 BufferedInputStream(缓冲输入流)的认知、源码和示例
本章内容包括3个部分:BufferedInputStream介绍,BufferedInputStream源码,以及BufferedInputStream使用示例. 转载请注明出处:http://www ...
- WPF实现斜纹圆角进度条样式
原文:WPF实现斜纹圆角进度条样式 运行效果: 进度条样式: <!--进度条样式--> <LinearGradientBrush x:Key="ProgressBar.Pr ...
- Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing
随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的 ...
- 完整学习使用CSS动画【翻译】
注:原文有较大改动 使用keyframes, animation属性,例如timing, delay, play state, animation-count, iteration count, d ...
- fabricjs line
let line1 = new fabric.Line([lineleft, lineheight, lineleft, 0], {//终止位置,线长,起始位置,top,这里是从项目中截下来的我用了变 ...
- ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel
回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...
随机推荐
- 279. 完全平方数 leetcode JAVA
题目: 给定正整数 n,找到若干个完全平方数(比如 1, 4, 9, 16, ...)使得它们的和等于 n.你需要让组成和的完全平方数的个数最少. 示例 1: 输入: n = 12 输出: 3 解释: ...
- 该用li还是得用
如:这样子少一层是很好,但为了美观,后面都补上a,但鼠标经过也会有背景色,所以还是得多一层li 解决后:
- “全栈2019”Java第七十一章:外部类访问静态内部类成员详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- web 应用的部署
一.项目管理 : zentao(国产开源),其他 project.redmine.trac 二.自动部署: jenkins:自动化配置 docker:容器,类似虚拟机,不过只是本机系统的内核的一个虚拟 ...
- jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容
jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容 .创建编辑器 UE.getEditor('editor', { initialFrameWidth:"100%" ...
- 【Leetcode】Binary Tree Traversal
把三个二叉树遍历的题放在一起了. 递归写法太简单,就不再实现了,每题实现了两种非递归算法. 一种是利用栈,时间和空间复杂度都是O(n). 另一种是借助线索二叉树,也叫Morris遍历,充分利用树中节点 ...
- CDQZ Day7
#include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...
- linux中校验文件完整性(md5,sha1)
经常在Linux下下载软件的人,一定会有一个良好的习惯:校验文件的hash,以确定文件的完整性甚至是安全性.我配置环境的时候也恰好用到了,笔者的是一个lubuntu的机子.这里我大致做个记录.(不了解 ...
- rocketmq的消息过滤-sql方式
通常我们会使用Tag过滤 特殊情况下我们也可以使用userproperties+TAGS过滤 , sql92定义 这两种都是在服务器端完成过滤, 对于超大数据量的场景(1小时4000W+)不要在客流端 ...
- Java学习之路(一):日常第一课,认识JAVA
Java的介绍 语言的起源 Java是SUN(Stanford University Network 斯坦福大学网络公司) 1995年推出的一门高级编程语言. Java名称的来源: Java最初是被命 ...