תאור המאפיין animation-fill-mode


קובע את המצב של האובייקט המונפש כאשר האנימציה עוצרת.


קוד לדוגמה המציג את המאפיין animation-fill-mode


<!DOCTYPE html>
<html>
<head>
    <title>כותרת האתר</title>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 3s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 2;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;  /* Chrome, Safari, Opera */
    animation: mymove 3s;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
</style>
<meta charset="utf-8"/>
</head>
<body>
    <div></div>
</body>
</html>

תמיכה בדפדפנים למאפיין animation-fill-mode


chrome logo
explorer logo
edge logo
firefox logo
safari logo
opera logo
4.0
10.0
כן
16.034.0
15.0

המספר מתחת לאייקון של הדפדפנים מציין את הגרסה הראשונה שבה נתמכת המאפיין.


גרסת css למאפיין animation-fill-mode


3


תכונות למאפיין animation-fill-mode


backwardsנעדכן בקרוב את תאור הערך.
bothנעדכן בקרוב את תאור הערך.
forwardsנעדכן בקרוב את תאור הערך.
inheritמגדיר את הערך שיורש מההורה.
initialמגדיר את המאפיין לערך ברירת המחדל שלו.
noneנעדכן בקרוב את תאור הערך.

השאר תגובה