CSS - Animierte Box mit Keyframes
Ein Hintergrundbild mit CSS und Keyframes animieren.
Um das Fernsehprogramm
zu wechseln, auf den Monitor klicken.
<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>
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