CSS - Animierte Box mit Keyframes

<style>

.animatedBox {

  width: 300px;

  height: 200px;

  text-align: center;

  font: 24px sans-serif;

  color: white;

  text-shadow: 0px 0px 12px black;

  border: 1px Solid Black;

  background-image: url('bild.png');

  background-position: bottom left;

  animation: moveBg 10s ease 1s infinite alternate;

}



@keyframes moveBg {

 100% {

  background-position: bottom right;

 }

}

</style>



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

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

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<object> Objekt

CSS - Kalender Symbol neben dem Datepicker

PHP - Den Schlüssel eines Arrays überprüfen

JavaScript - Interne Anker hervorheben

MySQL - Datum (DATETIME) in ein deutsches Datumsformat umwandeln