CSS Animation/sprite sheet won't stay on last image
up vote
1
down vote
favorite
I have the below code
div.sprite {
width: 200px;
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(5) 1;
animation-fill-mode: forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -974px;
}
}<div class="sprite">
</div>The issue is I can't get it to stop on the last frame (5) (also the animation seems to be a little off)
It keeps going back to the first, i've googled it and found loads of others have the same issue, but changing steps from 5 to 4, or setting
animation-fill-mode: forwards;
which seem to be the suggested fixes are not working for me.
html css css3 css-animations css-sprites
edited Nov 11 at 0:07
Temani Afif
61.2k93572
asked Nov 10 at 23:02
TheOne745665
385
add a comment |
up vote
1
down vote
favorite
I have the below code
div.sprite {
width: 200px;
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(5) 1;
animation-fill-mode: forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -974px;
}
}<div class="sprite">
</div>The issue is I can't get it to stop on the last frame (5) (also the animation seems to be a little off)
It keeps going back to the first, i've googled it and found loads of others have the same issue, but changing steps from 5 to 4, or setting
animation-fill-mode: forwards;
which seem to be the suggested fixes are not working for me.
html css css3 css-animations css-sprites
edited Nov 11 at 0:07
Temani Afif
61.2k93572
asked Nov 10 at 23:02
TheOne745665
385
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have the below code
div.sprite {
width: 200px;
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(5) 1;
animation-fill-mode: forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -974px;
}
}<div class="sprite">
</div>The issue is I can't get it to stop on the last frame (5) (also the animation seems to be a little off)
It keeps going back to the first, i've googled it and found loads of others have the same issue, but changing steps from 5 to 4, or setting
animation-fill-mode: forwards;
which seem to be the suggested fixes are not working for me.
html css css3 css-animations css-sprites
edited Nov 11 at 0:07
Temani Afif
61.2k93572
asked Nov 10 at 23:02
TheOne745665
385
I have the below code
div.sprite {
width: 200px;
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(5) 1;
animation-fill-mode: forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -974px;
}
}<div class="sprite">
</div>The issue is I can't get it to stop on the last frame (5) (also the animation seems to be a little off)
It keeps going back to the first, i've googled it and found loads of others have the same issue, but changing steps from 5 to 4, or setting
animation-fill-mode: forwards;
which seem to be the suggested fixes are not working for me.
div.sprite {
width: 200px;
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(5) 1;
animation-fill-mode: forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -974px;
}
}<div class="sprite">
</div>div.sprite {
width: 200px;
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(5) 1;
animation-fill-mode: forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -974px;
}
}<div class="sprite">
</div>html css css3 css-animations css-sprites
html css css3 css-animations css-sprites
edited Nov 11 at 0:07
Temani Afif
61.2k93572
asked Nov 10 at 23:02
TheOne745665
385
edited Nov 11 at 0:07
Temani Afif
61.2k93572
asked Nov 10 at 23:02
TheOne745665
385
edited Nov 11 at 0:07
Temani Afif
61.2k93572
edited Nov 11 at 0:07
Temani Afif
61.2k93572
edited Nov 11 at 0:07
Temani Afif
61.2k93572
61.2k93572
asked Nov 10 at 23:02
TheOne745665
385
asked Nov 10 at 23:02
TheOne745665
385
asked Nov 10 at 23:02
TheOne745665
385
385
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You should correct the last value of background-position. Your image has a width of 974px so using -974px is equivalent to 0px since there is the repeat so it will start again on the first one. You need to decrease it and then use steps(4). You may also correct the width of the div for a more accurate result:
div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>answered Nov 10 at 23:29
Temani Afif
61.2k93572
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You should correct the last value of background-position. Your image has a width of 974px so using -974px is equivalent to 0px since there is the repeat so it will start again on the first one. You need to decrease it and then use steps(4). You may also correct the width of the div for a more accurate result:
div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>answered Nov 10 at 23:29
Temani Afif
61.2k93572
add a comment |
up vote
0
down vote
You should correct the last value of background-position. Your image has a width of 974px so using -974px is equivalent to 0px since there is the repeat so it will start again on the first one. You need to decrease it and then use steps(4). You may also correct the width of the div for a more accurate result:
div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>answered Nov 10 at 23:29
Temani Afif
61.2k93572
add a comment |
up vote
0
down vote
up vote
0
down vote
You should correct the last value of background-position. Your image has a width of 974px so using -974px is equivalent to 0px since there is the repeat so it will start again on the first one. You need to decrease it and then use steps(4). You may also correct the width of the div for a more accurate result:
div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>answered Nov 10 at 23:29
Temani Afif
61.2k93572
You should correct the last value of background-position. Your image has a width of 974px so using -974px is equivalent to 0px since there is the repeat so it will start again on the first one. You need to decrease it and then use steps(4). You may also correct the width of the div for a more accurate result:
div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>div.sprite {
width: 194.8px; /* (974/5) */
height: 194px;
background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
animation: play 1s steps(4) forwards;
}
@keyframes play {
from {
background-position-x: -0px;
}
to {
background-position-x: -779.2px; /*974 - (974/5)*/
}
}
img {
border:1px solid;
background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>answered Nov 10 at 23:29
Temani Afif
61.2k93572
edited Nov 11 at 0:06
answered Nov 10 at 23:29
Temani Afif
61.2k93572
answered Nov 10 at 23:29
Temani Afif
61.2k93572
answered Nov 10 at 23:29
Temani Afif
61.2k93572
61.2k93572
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244275%2fcss-animation-sprite-sheet-wont-stay-on-last-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
