CSS - Animierte Box mit Keyframes

Ein Hintergrundbild mit CSS und Keyframes animieren.

Um das Fernsehprogramm zu wechseln, auf den Monitor klicken.


<style>

.
animatedBox {
  
width300px;
  
height200px;
  
text-aligncenter;
  
font24px sans-serif;
  
colorwhite;
  
text-shadow0px 0px 12px black;
  
border1px Solid Black;
  
background-imageurl('bild.png');
  
background-positionbottom left;
  
animationmoveBg 10s ease 1s infinite alternate;
}

@
keyframes moveBg {
 
100% {
  
background-positionbottom right;
 }
}
</
style>

<
div class="animatedBox">Animierte Box</div>

Der Quelltext für dieses Demo, befindet sich im Quelltext dieser Seite!

Siehe auch: Bilder-Farbrotation mit Gradient, Animationen mit Keyframes, Kompass-Animation, Eine Animation ab einer bestimmten Scroll-Position starten und Farbverlauf mit CSS

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<fieldset> Formularelemente gruppieren

CSS - Beschriftungen und Formularfelder gleichmäßig untereinander setzen

PHP - Metadaten einer Webseite auslesen

JavaScript - Die Werte in Eingabefeldern per Button-Klick ändern

MySQL - Datum nach Monaten sortieren

Fehlerhafter Quelltext
Die meisten Browser sind wahre Lesekünstler. Sie versuchen selbst aus dem größten Code-Chaos ein lesbares Bild für den Betrachter zu schaffen. Je mehr Fehler allerdings im Quelltext vorhanden ist, desto mehr Zeit wird er für die Darstellung benötigen. Eine fehlerfreie Ausgabe ist gleichermaßen zu bezweifeln.