Hi, I have a DIV element and it has a background image. Inside the DIV, there is a headline and a paragrapgh. I want to animate only the background image. So, I did this:
It is not working. No doubt I'm doing it wrong. Can someone help me? I just want to animate the background image only.
Code:
div {
background-image:url('images/home-background.webp');
background-size:cover;
background-position:center center;
background-attachment:fixed;
width:100%;
padding:50px;
height:800px;
box-sizing:border-box;
}
div > background-image {
animation: shimmy 3s infinite;
animation-direction: alternate;
}
@keyframes shimmy {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(20px, 50px);
}
}
It is not working. No doubt I'm doing it wrong. Can someone help me? I just want to animate the background image only.