CSS Background Image Animation
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>
<title>Example</title>
<style>
.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;
}
}
</style>
<div class="animatedBox">Animated box</div>
Leave a Reply