CSS background-position animate right to left
Solution 1
You could try using this tutorial
: CSS Background Animation
@keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
html {
width: 100%;
height: 100%;
background-image: url(background.png);
background-position: 0px 0px;
animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
-webkit-animation: animatedBackground 10s linear infinite;
-ms-animation: animatedBackground 10s linear infinite;
-o-animation: animatedBackground 10s linear infinite;
}
Example here: http://jsfiddle.net/verber/6rAGT/5/
Hope it that what you need)
Solution 2
working link: http://sagiavinash.com/labs/tests/css_anim/
This is an unorthodox trick.
<html>
<head>
<style>
.img{
width:1000px;
height:500px;
background:url(1.jpg) no-repeat left;
transition:background-position 1s;
-ms-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
-webkit-transition:background-position 1s;
}
</style>
</head>
<body>
<div class="img"></div>
<link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>
style.css:
img{
background-position:right;
whats happening here is initially the css mentioned in the <style>
is rendered.
later since the external stylesheet is in the body just before </body>
.
So style.css is loaded after the resources in the are loaded. so there is a lag in implementation of the css which allows us to apply a css transition.
NO JAVASCRIPT, NO EVENTS still we get what we want!
Maexwell
Updated on August 12, 2020Comments
-
Maexwell almost 4 years
I'm trying to animate a background-image, so that the image appears from right to left. I have used an image which has a greater width than the div-container, where the background is located. On start, the backgrond is the following
background: url(../img/zeppelin.png); background-repeat: no-repeat; background-position: right;
but when the page is loaded, I want the background to be animated, so that it is positioned left. This should take a eg. 2 seconds and only should be done one time. (the image should be positioned left afterwards).
I don't wanna use any mouse-events or pseudo-classes. Is there a way to animate it by using only CSS? I tried finding a solution with keyframes without success.