CSS-Animationseigenschaften

Definition und Verwendung

Einige CSS-Eigenschaften können zur Animation verwendet werden, was bedeutet, dass sie auch in Übergangseffekten verwendet werden können.

Eigenschaften, die zur Animation gesetzt werden können, können von einem Wert allmählich zu einem anderen Wert geändert werden, z.B. von der Größe, der Zahl, dem Prozentsatz und der Farbe.

Browser-Unterstützung

Die Zahlen in der Tabelle zeigen die erste Browserversion an, die CSS-Animationen vollständig unterstützt.

Die Zahlen nach -webkit-、-moz- oder -o- zeigen die erste Version, ab der der Präfix verwendet wird.

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-

Beispiel

Legen Sie eine Animation der Hintergrundfarbe von Rot nach Blau fest:

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
{}

Versuchen Sie es selbst

Animationseigenschaften

Im folgenden Table sind die Eigenschaften der Animation in CSS aufgeführt:

Eigenschaft TIY
background Versuchen Sie es
background-color Versuchen Sie es
background-position Versuchen Sie es
background-size Versuchen Sie es
border Versuchen Sie es
border-bottom Versuchen Sie es
border-bottom-color Versuchen Sie es
border-bottom-left-radius Versuchen Sie es
border-bottom-right-radius Versuchen Sie es
border-bottom-width Versuchen Sie es
border-color Versuchen Sie es
border-left Versuchen Sie es
border-left-color Versuchen Sie es
border-left-width Versuchen Sie es
border-right Versuchen Sie es
border-right-color Versuchen Sie es
border-right-width Versuchen Sie es
border-spacing Versuchen Sie es
border-top Versuchen Sie es
border-top-color Versuchen Sie es
border-top-left-radius Versuchen Sie es
border-top-right-radius Versuchen Sie es
border-top-width Versuchen Sie es
bottom Versuchen Sie es
box-shadow Versuchen Sie es
clip Versuchen Sie es
color Versuchen Sie es
column-count Versuchen Sie es
column-gap Versuchen Sie es
column-rule Versuchen Sie es
column-rule-color Versuchen Sie es
column-rule-width Versuchen Sie es
column-width Versuchen Sie es
columns Versuchen Sie es
filter Versuchen Sie es
flex Versuchen Sie es
flex-basis Versuchen Sie es
flex-grow Versuchen Sie es
flex-shrink Versuchen Sie es
font Versuchen Sie es
font-size Versuchen Sie es
font-size-adjust
font-stretch
font-weight Versuchen Sie es
grid Versuchen Sie es
grid-area Versuchen Sie es
grid-auto-columns Versuchen Sie es
grid-auto-flow Versuchen Sie es
grid-auto-rows Versuchen Sie es
grid-column Versuchen Sie es
grid-column-end Versuchen Sie es
grid-column-gap Versuchen Sie es
grid-column-start Versuchen Sie es
grid-gap Versuchen Sie es
grid-row Versuchen Sie es
grid-row-end Versuchen Sie es
grid-row-gap Versuchen Sie es
grid-row-start Versuchen Sie es
grid-template Versuchen Sie es
grid-template-areas Versuchen Sie es
grid-template-columns Versuchen Sie es
grid-template-rows Versuchen Sie es
height Versuchen Sie es
left Versuchen Sie es
letter-spacing Versuchen Sie es
line-height Versuchen Sie es
margin Versuchen Sie es
margin-bottom Versuchen Sie es
margin-left Versuchen Sie es
margin-right Versuchen Sie es
margin-top Versuchen Sie es
max-height Versuchen Sie es
max-width Versuchen Sie es
min-height Versuchen Sie es
min-width Versuchen Sie es
object-position Versuchen Sie es
opacity Versuchen Sie es
order Versuchen Sie es
outline Versuchen Sie es
outline-color Versuchen Sie es
outline-offset Versuchen Sie es
outline-width Versuchen Sie es
padding Versuchen Sie es
padding-bottom Versuchen Sie es
padding-left Versuchen Sie es
padding-right Versuchen Sie es
padding-top Versuchen Sie es
perspective Versuchen Sie es
perspective-origin Versuchen Sie es
right Versuchen Sie es
text-decoration-color Versuchen Sie es
text-indent Versuchen Sie es
text-shadow Versuchen Sie es
top Versuchen Sie es
transform Versuchen Sie es
transform-origin Versuchen Sie es
vertical-align Versuchen Sie es
visibility
width Versuchen Sie es
word-spacing Versuchen Sie es
z-index Versuchen Sie es