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%);
}
}
}
