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