background animation
Been trying to figure out how to create an infinite background animation that scrolls from right to left across the viewport in an infinite loop. So far, none of the tutorials that I have tried seem to work, so I thought I would post here and maybe someone else can notice something about my markup or css that explains my lack of results. Here is what I currently have:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=1920px;"/>
<link href="background.style.css" rel="stylesheet"/>
</head>
<body class="container">
<div class="scrolling-background"></div>
</body>
</html>
html {
.container {
overflow: hidden;
}
.scrolling-background {
background: url(scrolling_background.png) repeat-x;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-size: cover;
transform: translateX(100%);
animation: 60s linear infinite reverse slide;
}
@keyframes slide {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=1920px;"/>
<link href="background.style.css" rel="stylesheet"/>
</head>
<body class="container">
<div class="scrolling-background"></div>
</body>
</html>
html {
.container {
overflow: hidden;
}
.scrolling-background {
background: url(scrolling_background.png) repeat-x;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-size: cover;
transform: translateX(100%);
animation: 60s linear infinite reverse slide;
}
@keyframes slide {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
