CSS Background Animation

Question

Ich habe ein Hintergrundbild für ein Div Element definiert.

<style>
#animate-area { 
	width: 100%; 
	height: 190px; 
	background-image: url(https://as2.ftcdn.net/v2/jpg/03/28/70/83/1000_F_328708360_JO6Ke56XBsx8YSnFooULSpS3LUb8mSLv.jpg);
	background-position: 0px 0px;
}
</style>

<div id="animate-area"></div>

Wie kann ich das Bild ohne Javascript seitlich scrollen lassen?

Answer 1

Du kannst eine CSS Animation mit Keyframes erstellen.

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -1000px 0; }
}

und die Animation dann mit deinem Div verknüpfen

#animate-area { 
    width: 100%; 
    height: 190px; 
    background-image: url("https://as2.ftcdn.net/v2/jpg/03/28/70/83/1000_F_328708360_JO6Ke56XBsx8YSnFooULSpS3LUb8mSLv.jpg");
    background-position: 0px 0px;

    animation: animatedBackground 15s linear infinite;
}