So implementieren Sie Animationseigenschaften in CSS (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode von Animationsattributen in CSS (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

1. CSS-Animationseigenschaften können sich schrittweise von einem Wert zum anderen ändern, z. B. Größe, Menge, Prozentsatz, Position und Farbe.

2. Implementierungsmethode:

1. Animation definieren (slideOut ist der benutzerdefinierte Animationsname)

@-webkit-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}

3 Zu den für die Animation verwendeten Eigenschaften gehören Hintergrund/Rahmen/Rahmen/Boxschatten/Clip/Farbe/Spalte/Filter/Flex/Schriftart/Buchstabenabstand/Zeilenhöhe/Rand/Deckkraft/Umriss/Perspektive/Text/vertikale Ausrichtung/Sichtbarkeit /word-spacing/z-index usw., im Grunde alle Elemente.

Verwandte Empfehlungen:

CSS-Animation – Transition_html/css_WEB-ITnose

CSS-Animationsproduktion – CSS-Animation

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Animationseigenschaften in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!