CSS background Image Animation

script guru css

Background animations are an awesome touch when used correctly.Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.The following simple CSS snippet animates the background image through background position of a given element.

Here,The Nature background image within the sample element will elegantly scroll from left to right.

<!DOCTYPE html>
.animatedBox {
width: 200px;
height: 150px;
text-align: center;
font: 24px sans-serif;
color: white;
text-shadow: 0px 0px 12px black;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzkyEM9RiGT_NKFEBTlAjfvH3O7BRe7UcUu7Aoj0lRnOcRgOmM');
background-position: bottom left;
border: 1px solid black;
animation: moveBg 20s ease 2s 2 alternate none;

@keyframes moveBg {
100% {
background-position: bottom right;

<div class="animatedBox">Animated box</div>