Any one please give me the correct approach to do this using css3?
1) I have on bg image it contains multiple states of each sprite.
i am using keyframe animation to update the each of the position of backgroud, but it not come well
How to do it? if am not wrong any one show the correct way please?
my code :
<div class="bg"></div>
div.bg {
background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
height:443px;
width:795px;
}
#-webkit-keyframes animateBg {
0%{ background-position :0px center}
5.882352941176471%{ background-position :795px center}
11.764705882352942%{ background-position :1590px center}
17.647058823529413%{ background-position :2385px center}
23.529411764705884%{ background-position :3180px center}
29.411764705882355%{ background-position :3975px center}
35.294117647058826%{ background-position :4770px center}
41.1764705882353%{ background-position :5565px center}
47.05882352941177%{ background-position :6360px center}
52.94117647058824%{ background-position :7155px center}
58.82352941176471%{ background-position :7950px center}
64.70588235294119%{ background-position :8745px center}
70.58823529411765%{ background-position :9540px center}
76.47058823529412%{ background-position :10335px center}
82.3529411764706%{ background-position :11130px center}
88.23529411764707%{ background-position :11925px center}
23 94.11764705882354%{ background-position :12720px center}
}
div.bg:hover {
animation-name: animateBg;
animation-duration: 4s;
}
jsfiddle
it's because you need to define the number of steps and then just put the animation as the total length, it will divide it up itself.
(change the '1s' to speed up or slow down the animation)
div.bg {
background : url(https://dl.dropboxusercontent.com/u/10268257/all.png);
height:443px;
width:795px;
-webkit-animation: animateBg 1s steps(16) infinite;
-moz-animation: animateBg 1s steps(16) infinite;
-ms-animation: animateBg 1s steps(16) infinite;
-o-animation: animateBg 1s steps(16) infinite;
animation: animateBg 1s steps(16) infinite;
margin:0;
}
#-webkit-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#-moz-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#-ms-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#-o-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
http://jsfiddle.net/oe27u6sq/5/
and on:hover
http://jsfiddle.net/oe27u6sq/6/
you need use steps
div.bg {
background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
height:443px;
width:795px;
}
#-webkit-keyframes animateBg {
100%{ background-position: 15900px center}
}
div.bg:hover {
animation: animateBg 2s steps(20) infinite;
}
step num the images and the image size in the keyFrame 100%
About prefixing
#-webkit-keyframes animateBg {
0% {background-position: 0px center}
100%{ background-position: 15900px center}
}
#keyframes animateBg {
0% {background-position: 0px center}
100%{ background-position: 15900px center}
}
div.bg:hover {
-webkit-animation: animateBg 2s steps(20) infinite; /* Chr, Saf */
animation: animateBg 2s steps(20) infinite; /* IE >9, Fx >15, Op >12.0 */
}
http://jsfiddle.net/p65j4oar/
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'm trying to make a banner that scrolls sideways infinitely with css3 animation. The problem is that after the animation is over it has a harsh cut when it's restarting. I'm trying to figure out how to prevent that harsh animation.
I've put my code here.
#keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}
#-webkit-keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}
#masthead {
background-image: url('http://static.communitytable.parade.com/wp-content/uploads/2014/06/dogs-in-world-cup-jerseys-ftr.jpg');
animation: slideleft 5s infinite ease-in-out;
-webkit-animation: slideleft 5s infinite ease-in-out;
width: 100%;
height: 1200px;
}
<div id="masthead"></div>
JavaScript would probably be a better way to handle this. Though in CSS, you could repeat the background image and extend the background-position and animation duration to a very high number. Here is a fiddle.
#keyframes slideleft {
from { background-position: 0%; }
to { background-position: 90000%; }
}
#masthead {
background-repeat: repeat-x;
...
animation: slideleft 600s infinite linear;
}
If you are using jQuery it would be fairly straightforward:
(function animateBG() {
$('#masthead').animate({
backgroundPosition: '+=5'
}, 12, animateBG);
})();
#keyframes slideleft {
from { background-position: 0%; }
to { background-position: 90000%; }
}
#masthead {
background-image: url('https://i.stack.imgur.com/TE4UI.jpg');
background-repeat: repeat-x;
animation: slideleft 600s infinite linear;
-webkit-animation: slideleft 600s infinite linear;
width: 100%;
height: 1200px;
}
<div id="masthead"></div>
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>
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'); }
}