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.

<dialog> Dialog Element

CSS - Datum als Kalenderblatt darstellen

PHP - Neuer Dateiname falls eine hoch geladene Datei bereits existiert

JavaScript - Checkboxen JavaScript-Funktion zuweisen

MySQL - Die 10 neusten Einträge einer Tabelle anzeigen