Customer Loading Animation Keyframe/Background Position - html

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; }
}

Related

Smooth background animation

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; }
}

How to make background-image scroll continuously horizontally without a break in animation?

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>

CSS Image Sprite Animations With steps() Function not working with my image

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>

CSS3 Background Animation Moving Content

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>

CSS Sprite Animation

Hi I've been trying to do a simple animation with css and a sprite, and it doesn't seem to work. Am I missing something? I've made a JS Fiddle sample.
Can some one explain me why this doesnt work?
http://jsfiddle.net/CmF6A/
<body>
<div id="wrapper">
<div id="bike">
</div>
</div>
</body>
div#wrapper {
width: 64px;
height: 80px;
background-color: #c0b898;
margin: auto;
}
#-webkit-keyframes running {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: running 1s steps(6, end) infinite;
}

There seems to be a problem with your animation name if you renamed it to something else it works.
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
-webkit-animation: anim 1s steps(6, end) infinite;
}
#-webkit-keyframes anim {
0% {
background-position: 0px;
}
100% {
background-position: -320px;
}
}
An example: http://jsfiddle.net/CmF6A/2/

Here is a JSfiddle :)
I have simply updated your own fiddle.
http://jsfiddle.net/CmF6A/5/
#bike{
width: 64px;
height: 80px;
background-image:url('http://i.imgur.com/WVPnShz.png');
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
from {background-position:0px;}
to {background-position:-320px;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background-position:0px;}
to {background-position:-320px;}
}

Check out this tutorial to create Sprite sheet animation
https://medium.com/#Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb
.animatedDiv {
width: 820px;
height: 312px;
background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
-webkit-animation: play 2s steps(48) infinite;
-moz-animation: play 2s steps(48) infinite;
-ms-animation: play 2s steps(48) infinite;
-o-animation: play 2s steps(48) infinite;
animation: play 2s steps(48) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-moz-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-ms-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#-o-keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}
#keyframes play {
from {
background-position: 0px;
}
to {
background-position: -39360px;
}
}