CSS background-position animate right to left
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!
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)