i am trying to create a very simple animation sequence base on this little article (http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps) but nothing seems to animate.
my css code is the following
.mainContent {
width:960px;
height:388px;
background:url('http://www.wearewebstars.dk/codepen/img/s1.png') repeat-x 0 0;
background-color:#58e9a3;
-webkit-animation: play 1s linear infinite;
-moz-animation: play 1s linear infinite;
-ms-animation: play 1s linear infinite;
animation: play 1s linear infinite;
}
#keyframes play {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -190px;
}
100% {
background-position: 0px -300px;
}
}
An example of my code (css+html) can be found here
http://jsfiddle.net/atragan/pqg2yrpL/
Just also adding prefix to your keyframes like this:
#-webkit-keyframes play {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -190px;
}
100% {
background-position: 0px -300px;
}
}
#-moz-keyframes play {
...
}
#-o-keyframes play {
...
}
#keyframes play {
...
}
DEMO : http://jsfiddle.net/pqg2yrpL/1/
Related
I have created a div with a background image. Using keyframe animation I want it to move vertically up continuously, which it does however at the end of the frame it jumps then continues. I am new with keyframes. I can not use JS.
I have tried looking at the questions on here but they are mainly focused on sliders.
This is my code so far:
<style>
#animate-area {
background-image: url(/image.png);
width: 100%;
height: 500px;
background-position: 0px 0px;
background-repeat: repeat-x;
-webkit-animation: animatedBackground 5s ease-in-out infinite;
-moz-animation: animatedBackground 5s ease-in-out infinite;
animation: animatedBackground 5s ease-in-out infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
</style>
<div id="animate-area"></div>
As soon as the frame has finished it jumps and then continues. Is it possible to for it to continuously loop without jumping with a background image? If so, how?
Live example to continuously move up :
#animate-area {
background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
width: 100%;
height: 500px;
background-position: 0;
animation: slideup 5s linear 1s infinite;
position:absolute;
}
#keyframes slideup {
0% { background-position: 0 0; }
50% { background-position: 0 -500px; }
100% { background-position: 0 -900px; }
}
<div id="animate-area"></div>
you can use twice the same image with opposite coordonates to move from/to :
#animate-area {
background-image: url(http://dummyimage.com/100&text=img_1), url(http://dummyimage.com/100&text=img_2);
width: 100%;
height: 500px;
background-position: 0px 0px, 0 -100%;
background-repeat: repeat-x;
animation: animatedBackground 5s ease-in-out infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0, 0 -100%;
}
to {
background-position: 0 100%, 0 0;
}
}
<div id="animate-area"></div>
different text is used to show what happens
Background image animation not working in Firefox and I don't want the background repeat image in animation.
Here is url: http://trekoholic.com/site/
body {
background:url(../img/bg.jpg);
-webkit-animation: slide 30s linear infinite;
}
#-webkit-keyframes slide {
0%{ background-position: left 20%; }
25%{ background-position: 100px 0; }
50%{ background-position: 200px 0; }
100%{ background-position: 300px 0; }
}
#-moz-keyframes slide {
0%{ background-position: left 20%; }
25%{ background-position: 100px 0; }
50%{ background-position: 200px 0; }
100%{ background-position: 300px 0; }
}
Just add one line:
body{
background:url(../img/bg.jpg);
-webkit-animation: slide 30s linear infinite;
animation: slide 30s linear infinite;
}
i want to use this code , but i want animation goes vertical.
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
i found this code here : http://jsfiddle.net/e3WLD/3/
thanks for help
The background-position accepts 2 parameters :
the first one for horizontal positioning
and the second one for vertical positioning
More info on background-position on W3schools
So by adding a second parameter to the background-position property you can
animate your background vertically.
I edited your JSFiddle
To this:
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px;
background-repeat: repeat-y;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 1000px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
I am able to do vertical by transforming the element 90 degrees.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
Working Fiddle
You are only setting and animating one of the background position values so it assumes that are referreing to the first one (x-position) and the other defaults to auto (I think).
Try this
**JSFiddle Demo**
CSS
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px; /* note */
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 1000px; }
}
#-moz-keyframes myanim
{ 0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#-o-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
If you want to set it to vertically rotate like this: http://jsfiddle.net/jme11/AYKC2/
Then you need to set the repeat to repeat-y and change the background position to match the element's height:
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}
CSS help
Can somone please tell me why this the background animation is only working for chrome?
Its not work on firefox or IE.
#animate-area {
width: 100%;
background-position: 0px 0px;
background-repeat: repeat;
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
You have added below code in you css .. check the animation name here extra _m is added. this is the reason your animation is not working on IE and Firefox.
#keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
Check the working DEMO here.
#animate-area {
width: 100px;
height:100px;
background:url("http://lorempixel.com/100/100/");
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
#-webkit-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
#-moz-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
#keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
So I found this
http://jsfiddle.net/simurai/CGmCe/
The code is easy enough and I was able to integrate into a page of mine. However when I go to make a 2nd animated sprite on the same page, it doesn't work because it seems that the code
-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
applies globally to all css animations and not specifically to the div labeled "hi"
It's really the TO position that needs to change per ID, any thoughts on how to put more than one?
When you use
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
you create a set of keyframes called play. The text after #keyframes is an identifier; in this case 'play' is just the name for this configuration. Then for an element you tell it what animation to use, and in your case you tell it to use the play set of frames.
In your fiddle your .hi element has the following animation:
animation: play .8s steps(10) infinite;
And here 'play' is just the identifier that is declared for the keyframes, and not a command to run the animation.
If you want to have more than 1 different animation, the way to go would be to use 2 different animations, and give them different identifiers (i.e. 'play' and 'animation2' or whatever).
For example, using the same sprite in your example:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
<div class="bye"></div>
And the CSS (note that I'm not using all the possible browser prefixes, and the animations are called longwave and shortwave):
.hi {
width: 50px;
height: 72px; border: 1px dashed red;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: longwave .8s steps(10) infinite;
animation: longwave .8s steps(10) infinite;
}
.bye {width: 50px; height: 72px; border: 1px dashed magenta;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: shortwave .8s steps(5) infinite;
}
#-webkit-keyframes longwave {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes longwave {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-webkit-keyframes shortwave {
from { background-position: -150px; }
to { background-position: -400px; }
}
#keyframes shortwave {
from { background-position: -150px; }
to { background-position: -400px; }
}
W3C spec. documents for animations (CSS Animations Module Level 3, Section 2)
More details in Mozilla's Developer Network animation totorial
Do you mean to control the animation separately for each object?
http://jsfiddle.net/CGmCe/1738/
If so, just create separate IDs for other DIVs
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
}
#hi1 {
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#hi2 {
-webkit-animation: play .4s steps(10) infinite;
-moz-animation: play .4s steps(10) infinite;
-ms-animation: play .4s steps(10) infinite;
-o-animation: play .4s steps(10) infinite;
animation: play .4s steps(10) infinite;
}
And HTML:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi" id="hi1"></div>
<div class="hi" id="hi2"></div>