图解animation-fill-mode属性

最新推荐文章于 2024-05-23 09:14:30 发布

ghostlpx

最新推荐文章于 2024-05-23 09:14:30 发布

阅读量932

点赞数

分类专栏： Web开发技术分享文章标签： CSS3 animation

本文链接：https://blog.csdn.net/ghostlpx/article/details/52734422

版权

技术分享同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Web开发

6 篇文章 0 订阅

订阅专栏

animation-fill-mode用来规定对象在动画时间之外的状态，它有4个值：

none 不改变默认行为
backwoards 在animation-delay时间内，在动画开始之前，应用开始属性值（在第一个关键帧中定义的那个值）
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义的那个值）
both 向前和向后填充模式都被使用

举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{ width: 50px; height: 50px; background: red; transform: translateY(0); }
		.box.on{ animation: 1s myMove 4s both; }

		@keyframes myMove{
			from{
				transform: translateY(-50px);
			}
			to{
				transform: translateY(50px);
			}
		}
	</style>
</head>
<body>
	<div class="box on"></div>
</body>
</html>

使用图片说明进行动画的属性 translateY 和时间的关系：

横轴表示时间，每格0.5s，原点处代表动画开始的时刻
纵轴表示translateY的值，每格50px，原点处代表值为0

1.animation-fill-mode : none

2.animation-fill-mode : forwards

3.animation-fill-mode : backwards

4.animation-fill-mode : both

注：本篇文字题材来自segmentfault社区中的一个提问，经我整理转发于此。知识无价，但需尊重。

ghostlpx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图解animation-fill-mode属性

animation-fill-mode用来规定对象在动画时间之外的状态，它有4个值：none 不改变默认行为backwords 在animation-delay时间内，在动画开始之前，应用开始属性值（在第一个关键帧中定义的那个值）forwords 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义的那个值）both 向前和向后填充模式都被使用举例说明：
复制链接

扫一扫

专栏目录