Home >Web Front-end >CSS Tutorial >How to use the animation-fill-mode property

How to use the animation-fill-mode property

青灯夜游Original: 2019-02-01 11:27:313919browse

The animation-fill-mode attribute is used to apply the style to the element when the animation does not play (when the animation is completed, or when the animation has a delay and does not start playing), that is, whether its animation effect is visible.

CSS3 animation-fill-mode property

Function:animation- The fill-mode attribute specifies whether the animation effect is visible before or after the animation is played.

Note: By default, CSS animation will not affect the element until the first keyframe is played, and will stop affecting the element after the last keyframe is completed. The animation-fill-mode property overrides this behavior.

Syntax:

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

none: Does not change the default behavior.

forwards: When the animation is completed, keep the last property value (defined in the last keyframe).

backwards: During the period of time specified by animation-delay, the start property value (defined in the first keyframe) is applied before the animation is displayed.

both: Both forward and backward fill modes are applied.

Note: Internet Explorer 9 and earlier versions do not support the animation-fill-mode attribute.

CSS3 animation-fill-mode attribute usage example

<!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>

Rendering:

How to use the animation-fill-mode property

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use the animation-fill-mode property. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use animation-play-state propertyNext article：How to use animation-play-state property

See more

How to use the animation-fill-mode property

Related articles