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.

<button> Button

CSS - Glühende Neon Buchstaben

PHP - Sonnenauf.- und Sonnenuntergang mit der Geolocation API auslesen

JavaScript - HTML-Tabelle Spaltenbreite anpassen

MySQL - Zeichenkette ersetzen mit REPLACE

Aktualität vortäuschen
Viele Seiten werben mit "aktuellen News", die in Wirklichkeit Wochen alt sind. Wenn man aktuelle News verspricht, dann sollte man diese auch bieten, ansonsten sollte man lieber darauf verzichten.