Menu
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.
339
Your backgrounds can animate in any direction, up, down, left, right, or even diagonally. We will be using the CSS keyframes rule and the background-position property to create the effect.
Animations can be done with absolute positioning, but you'll be confusing the concepts of Positioning and Design-y motion. So the best way to get a smooth effect for this exact same animation would be to alter the element's translate() attribute.
The background-position CSS property sets the initial position for each background image.
You can use a combination of position keywords: center , top , bottom , left and right . background-position: center center; The background image will be positioned in the center of the element.
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)
53
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!
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
