Home >Web Front-end >CSS Tutorial >How to use css animation-fill-mode property
How to use css animation-fill-mode property
- (*-*)浩Original
- 2019-05-28 18:06:043278browse
The animation-fill-mode attribute specifies whether the animation effect is visible before or after the animation is played.
Note: The attribute value is one or more fill pattern keywords separated by commas.
Syntax
animation-fill-mode : none | forwards | backwards | both;
| Value |
Description |
| none |
Does not change the default behavior. |
| forwards |
When the animation is complete, keep the last property value (defined in the last keyframe). |
| backwards |
During the period of time specified by animation-delay, before the animation is displayed, the start property value (on the first defined in keyframes). |
| both |
Both forward and backward fill modes are applied. |
##Example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}The above is the detailed content of How to use css 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 css word-wrap attributeNext article：How to use css word-wrap attribute