CSS Animation/sprite sheet won't stay on last image
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 '18 at 0:07
Temani Afif
67.8k93776
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
add a comment |
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 '18 at 0:07
Temani Afif
67.8k93776
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
add a comment |
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 '18 at 0:07
Temani Afif
67.8k93776
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
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 '18 at 0:07
Temani Afif
67.8k93776
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
edited Nov 11 '18 at 0:07
Temani Afif
67.8k93776
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
edited Nov 11 '18 at 0:07
Temani Afif
67.8k93776
edited Nov 11 '18 at 0:07
Temani Afif
67.8k93776
edited Nov 11 '18 at 0:07
Temani Afif
67.8k93776
67.8k93776
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
asked Nov 10 '18 at 23:02
TheOne745665TheOne745665
385
385
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
add a comment |
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 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
add a comment |
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 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
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 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
edited Nov 11 '18 at 0:06
answered Nov 10 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
answered Nov 10 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
answered Nov 10 '18 at 23:29
Temani AfifTemani Afif
67.8k93776
67.8k93776
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.
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
