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


אפשרות לכתיבה מקוצרת לכל מאפייני האנימציה חוץ מ animation-play-state ו animation-fill-mode.


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


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

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

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

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


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

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


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


3


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


alternateנעדכן בקרוב את תאור הערך.
alternate-reverseנעדכן בקרוב את תאור הערך.
backwardsנעדכן בקרוב את תאור הערך.
bothנעדכן בקרוב את תאור הערך.
easeנעדכן בקרוב את תאור הערך.
ease-inנעדכן בקרוב את תאור הערך.
ease-in-outנעדכן בקרוב את תאור הערך.
ease-outנעדכן בקרוב את תאור הערך.
forwardsנעדכן בקרוב את תאור הערך.
infiniteנעדכן בקרוב את תאור הערך.
inheritמגדיר את הערך שיורש מההורה.
initialמגדיר את המאפיין לערך ברירת המחדל שלו.
linearנעדכן בקרוב את תאור הערך.
noneנעדכן בקרוב את תאור הערך.
normalנעדכן בקרוב את תאור הערך.
reverseנעדכן בקרוב את תאור הערך.
step-endנעדכן בקרוב את תאור הערך.
step-startנעדכן בקרוב את תאור הערך.
unsetנעדכן בקרוב את תאור הערך.

השאר תגובה