I have the following code:
Here's the CSS:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
body {
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
Which is for the following HTML:
<body>
<div class="innercontent">
<p>This content is moving, why?</p>
</div>
</body>
I am trying to animate the body background to be clouds moving, but the entire page is scrolling, along with the background. For example, if you were to run the above code, the text "This content is moving, why?" would be moving. How can I fix this?
I show you an example working with your code:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
<html><head>
</head>
<body>
<div id="animate-area"><p>This content is moving, why?</p></div>
</body></html>
Related
I'm trying to create a custom loading spinner using keyframes and a spritesheet.
jsfiddle: http://jsfiddle.net/Flignats/aaaaaf6h/
My issue is that the spinner appears to be sliding (background position) and I'd like it to be stationary while spinning.
My CSS:
.hi {
width: 68px;
height: 68px;
background-image: url("data:image/png;base64, ... );
-webkit-animation: play 1s steps(23) infinite;
-moz-animation: play 1s steps(23) infinite;
-ms-animation: play 1s steps(23) infinite;
-o-animation: play 1s steps(23) infinite;
animation: play 1s steps(23) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1496px; }
}
Is there a way to make this smoother? Or if anyone knows how to do this better I am all ears.
Here is what I have
html {
background: url(Images/landscape.jpeg)repeat-y;
background-size: 150%;
background-position: bottom;
-webkit-animation: backgroundScroll 190s linear infinite;
animation: backgroundScroll 190s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
#keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
You might get better results setting the background image on an element and then moving the entire element with transform: translate:
#keyframes doScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-400);
}
}
Check out this older, but still relevant article.
I got it! I just needed to play with the interval speed. I slowed it down to around 85s and its a lot smoother. I was dragging it out to long.
You can do it like this:
html {
background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
background-size: 150%;
background-position: 0px 0px;
animation: animatedBackground 15s linear infinite;
-moz-animation: animatedBackground 15s linear infinite;
-webkit-animation: animatedBackground 15s linear infinite;
-ms-animation: animatedBackground 15s linear infinite;
-o-animation: animatedBackground 15s linear infinite;
}
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
i used CSS step function (link)
this example work fine but change my image that case it is not working perfect anyone guide me
mycode
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}
.hi {
width: 205px;
height: 241px;
background-image: url("images/Street-background-13.png");
margin: 0 auto;
-webkit-animation: wink 6s steps(29, end) infinite;
-moz-animation: wink 6s steps(29, end) infinite;
animation: wink 6s steps(29, end) infinite;
My Image link here
If you change the background colour, and add vendor specific prefixes (oh and add a last curly brace to end your css definition for .hi), it works, check it out:
#-webkit-keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
#-moz-keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
#-o-keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
#keyframes wink {
from {
background-position: 0px;
}
to {
background-position: -5963px;
}
}
.hi {
width: 205px;
height: 241px;
background-color: #000;
background-image: url("http://i.stack.imgur.com/r443O.png");
margin: 0 auto;
-webkit-animation: wink 6s steps(29, end) infinite;
-moz-animation: wink 6s steps(29, end) infinite;
-o-animation: wink 6s steps(29, end) infinite;
animation: wink 6s steps(29, end) infinite;
}
<div class="hi">
</div>
Am trying to animate an image (that uses class="under") and is overlapped by a still image (that uses class="over"). Animation effect works fine for the lower image with Firefox and IE-9 browsers, whereas Chrome does not show animation. Chrome shows both still images.
Any solution please.
.under
{
border-style: solid;
border-color: #0000ff;
border-radius:15px;
position: absolute;
left:173px;
top:0px;
z-index: 1;
}
.over
{
position:relative;
left:100px;
top:20px;
z-index: 2;
border-radius: 15px;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 1000px;
height: 160px;
background-image: url(images/img7.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
}
Thanks
Anand
Try #-webkit-keyframes animatedBackground
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
I want to have multiple background images using HTML and CSS (as those are the only languages I have learned so far).
The best result I got for background cover is from id="full-bg". Now how do I make it to multiple background cover photo at the same time rotating(changing in every lets say 5 sec).
Try this JSfiddle
This code only uses css and rotates trough the backgrounds you add.
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
animation-duration: 5s;
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes fade-bg {
0% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
51% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
100% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}
I hope this helps!
Here is a cross-browser solution:
body{
-webkit-animation: change 5s linear infinite;
-moz-animation: change 5s linear infinite;
-ms-animation: change 5s linear infinite;
-o-animation: change 5s linear infinite;
animation: change 5s linear infinite;
}
#-webkit-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-moz-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-ms-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-o-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}