CSS Animation

Zur Navigation springen Zur Suche springen

meine zentrale CSS-Datei[1] enthält bereits einige Beispiele von Animation

Ergebnisse

eine Verzögerung der Animation funktioniert nur, wenn diese als CSS-Klasse in der Commons.css definiert ist. Verzögerung als span- oder div-Element direkt auf der Wikiseite zeigt keinen Effekt.

Bounce

Vorsicht, aufpassen!!! uuups, da ist was passiert

Rotation mit CSS-Animation und div-Element

sollte um 40 sec verzögert sein

@keyframes rotY { 50% { transform: rotateY(90deg) } }
@-webkit-keyframes rotY { 50% { transform: rotateY(90deg) } }
@-moz-keyframes rotY { 50% { transform: rotateY(90deg) } }
Rotation um die eigene Achse

Rotation und Translation mit CSS-Klasse rotmove

Das ist die Animation der Startseite. 10 Sekunden Verzögerung (funktioniert nur mit CSS-Klass), fährt man mit der Maus über das Element, stoppt die Animation. Der Farbwechsel auf Grün erfolgt erst im letzten Frame.

Ich wünsche mir eine Aktion, um die Animation neu zu starten. Ob .rotmove:active, .rotmove:focus funktioniert oder nicht, habe ich noch nicht herausgefunden.
@keyframes rotmove { 0% { transform: rotateY(0deg) translateY(-600px); visibility: hidden; opacity: 0; color: #f0f; }
	10% { transform: rotateY(90deg) translateY(-540px); visibility: visible; opacity: 0.5; }
	40% { transform: rotateY(0deg) translateY(-360px); opacity: 0.8; }
	70% { transform: rotateY(90deg) translateY(-180px); opacity: 1; } 
	99% { color: #f0f }
	100% { transform: rotateY(0deg) translateY(0px); opacity: 1; visibility: visible; color: rgb(80, 109, 44) }
}

.rotmove { font: bold 3.5em 'Alfa Slab One'; text-align: center; color: rgb(80, 109, 44); text-shadow: 4px 4px 10px #425b24; margin: 0.3em; visibility: hidden;
	animation: rotmove 8s 1; animation-delay: 15s; animation-fill-mode: forwards; animation-timing-function: linear;
	-webkit-animation: rotmove 8s 1; -webkit-animation-delay: 10s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: linear;
	-moz-animation: rotmove 8s 1; -moz-animation-delay: 10s; -moz-animation-fill-mode: forwards; -moz-animation-timing-function: linear;
}
.rotmove:hover {
  -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
  animation-play-state: paused; -moz-animation-play-state: paused;
}

.rotmove:active, .rotmove:focus {
  -webkit-animation-play-state: initial; /* Safari 4.0 - 8.0 */
  animation-play-state: initial; -moz-animation-play-state: initial;
}

sanftes Einblenden, plötzliches Ausblenden

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
/* Anwendung in einem Element */
.einblenden { animation: fadeIn 10s 3; font: bold 2em 'Alfa Slab One'; text-align: center; color: rgb(80, 109, 44); text-shadow: 4px 4px 10px #425b24;}
Einblenden sanft, Ausblenden plötzlich

sanftes Ein-und Ausblenden

@keyframes mymove { 50% { opacity: 0; } }
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove { 50% { opacity: 0; } }
@-moz-keyframes mymove { 50% { opacity: 0; } }
sanftes Ein- und Ausblenden

zwischen zwei Farben wechseln

wirkt sich nur auf den Text aus

/* https://code-boxx.com/css-blinking-animation/ */
@keyframes blinking  { 0% { color: #ff3d50; } 100% { color: #222291; } }
das sollte Blinken

Blinken zwischen Farbe und transparent

wirkt sich nur auf den Text aus

@keyframes blink { 50% { color: transparent; } }
wenn es rot wird ist die blinkerei vorbei

Nochmals Blinken

wirkt sich nur auf den Text aus

@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
@-moz-keyframes blink { 50% { color: transparent; } }
.blink { 
 animation: blink 3s 10; -webkit-animation: blink 3s 10; -moz-animation: blink 3s 10;
}
blinken mit color=transparent

Blinken mit 50% visibility

@keyframes blinken { 50% { visibility: hidden; } }
@-moz-keyframes blinken { 50% { visibility: hidden; } } 
@-webkit-keyframes blinken { 50% { visibility: hidden; } }
.blinken { 
 animation: blinken 3s 10; -webkit-animation: blinken 3s 10; -moz-animation: blinken 3s 10;
}
blinken mit color=transparent

Links