תאור המאפיין animation-direction


קובע האם להפעיל את האנימציה בכיוון ההפוך.


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


<!DOCTYPE html>
<html>
<head>
    <title>כותרת האתר</title>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}
</style>
<meta charset="utf-8"/>
</head>
<body>
    <div></div>
</body>
</html>

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


chrome logo
explorer logo
edge logo
firefox logo
safari logo
opera logo
43.0
10.0
כן
16.0
9.0
30.0

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


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


3


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


alternateנעדכן בקרוב את תאור הערך.
alternate-reverseנעדכן בקרוב את תאור הערך.
inheritנעדכן בקרוב את תאור הערך.
initialמגדיר את המאפיין לערך ברירת המחדל שלו.
normalנעדכן בקרוב את תאור הערך.
reverseנעדכן בקרוב את תאור הערך.

השאר תגובה