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>

Unterstützung: Mozilla Firefox, Google Chrome und Microsoft Edge (EdgeHTML: 17.17063)

Bausteine  [Alle Anzeigen]

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

CSS - Leuchtende blaue Eingabefelder

PHP - Alle Sessions bis auf eine löschen

JavaScript - Darstellungsmodus überprüfen

MySQL - Die Differenz (Anfang und Ende) einer Uhrzeit ermitteln