欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

animation-fill-mode属性怎么用

程序员文章站 2022-06-04 15:36:32
...
animation-fill-mode属性是用于当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式,即其动画效果是否可见。

animation-fill-mode属性怎么用

CSS3 animation-fill-mode属性

作用:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

说明:默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

语法:

animation-fill-mode : none | forwards | backwards | both;

none:不改变默认行为。

forwards: 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。

注:Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

CSS3 animation-fill-mode属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 3s;
	animation-iteration-count:2;
	animation-fill-mode:forwards;

	/* Safari 和 Chrome */
	-webkit-animation:mymove 3s;
	-webkit-animation-iteration-count:2;
	-webkit-animation-fill-mode:forwards;
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图:

animation-fill-mode属性怎么用

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注相关教程栏目!!!

以上就是animation-fill-mode属性怎么用的详细内容,更多请关注其它相关文章!