Ιδιότητα animation-duration
Η ιδιότητα animation-duration ορίζει
το χρόνο εκτέλεσης μιας κίνησης.
Σύνταξη
επιλογέας {
animation-duration: χρόνος σε s ή ms;
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
s |
Ορίζει χρόνο σε δευτερόλεπτα (π.χ. 3s). |
ms |
Ορίζει χρόνο σε χιλιοστά του δευτερολέπτου (π.χ. 3ms). Ένα δευτερόλεπτο είναι 1000 χιλιοστά του δευτερολέπτου. |
Προεπιλεγμένη τιμή: 0s.
Παράδειγμα
Σε αυτό το παράδειγμα, η κίνηση θα εκτελείται
για διάρκεια 3 δευτερολέπτων:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Δείτε επίσης
-
την ιδιότητα
animation-name,
που ορίζει το όνομα της κίνησης -
την ιδιότητα
animation-delay,
που ορίζει την καθυστέρηση πριν από την εκτέλεση της κίνησης -
την ιδιότητα
animation-timing-function,
που ορίζει την ταχύτητα εκτέλεσης της κίνησης -
την ιδιότητα
animation-iteration-count,
που ορίζει τον αριθμό των επαναλήψεων της κίνησης -
την ιδιότητα
animation-direction,
που ορίζει την κατεύθυνση της κίνησης -
την ιδιότητα
animation-fill-mode,
που ορίζει την κατάσταση της κίνησης -
την ιδιότητα
animation-play-state,
που επιτρέπει τη διακοπή της κίνησης -
την ιδιότητα
animation,
που είναι μια συντόμευση για κινήσεις -
την εντολή
@keyframes,
που ορίζει τα βασικά καρέ της κίνησης -
τις ομαλές μεταβάσεις
transition, που αντιπροσωπεύουν κίνηση όταν το ποντίκι περνάει πάνω από ένα στοιχείο