CSS @keyframes κανόνας

Ορισμός και χρήση

Μέσω του κανόνα @keyframes, μπορείτε να δημιουργήσετε κίνηση.

Το αρχή της δημιουργίας κίνησης είναι να αλλάζει σταδιακά ένα σύνολο των CSS ρυθμίσεων σε ένα άλλο.

Στη διάρκεια της κίνησης, μπορείτε να αλλάξετε πολλές φορές αυτό το σύνολο των CSS ρυθμίσεων.

Καθορίστε το χρόνο της αλλαγής με ποσοστό ή με τα κλειδιά "from" και "to", που είναι ισοδύναμα με το 0% και το 100%.

Το 0% είναι το ξεκίνημα της κίνησης και το 100% είναι το τέλος της κίνησης.

Συμβουλή:Για την καλύτερη υποστήριξη από τους περιηγητές, θα πρέπει να καθορίζετε πάντα τους επιλογείς 0% και 100%.

Συμβουλή:Χρησιμοποιήστε τις ιδιότητες της κίνησης για να ελέγξετε την εμφάνιση της κίνησης και να συνδέσετε την κίνηση με τον επιλογέα.

Note:Το όρισμα !important αγνοείται στους κρίκους (βλέπε τον τελευταίο παράδειγμα αυτής της σελίδας).

Για περισσότερες πληροφορίες, δείτε:

Εκμάθηση CSS3:Ανίχνευση CSS3

πράξη

παράδειγμα 1

Make the div element move down at a constant speed:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

try it yourself

Example 2

Add multiple keyframe selectors in one animation:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

try it yourself

Example 3

Change multiple CSS styles in one animation:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

try it yourself

Example 4

Multiple keyframe selectors with multiple CSS styles:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

try it yourself

Example 5

Note:The !important rule is ignored in keyframes:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* ignored */
  to   {top: 200px;}
}

try it yourself

CSS syntax

@keyframes animationname {keyframes-selector {css-styles;}}

attribute value

value description
animationname required. Defines the name of the animation.
keyframes-selector

required. The percentage of animation duration.

Valid values:

  • 0-100%
  • from (equivalent to 0%)
  • to (equivalent to 100%)
css-styles required. One or more valid CSS style properties.

browser support

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-