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


קובע כמה זמן לוקח לאנימציה להשלים מחזור חיים אחד.


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


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

/* 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-duration


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

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


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


3


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


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

השאר תגובה