CODEWITHSUNDEEP
csscss-animations
relz
relz

Reputation: 11

Why does the image disappear after the animation?

For some reason are the image gone when the animation is finished? :/

.coin {
    width: 200px;
    height: 200px;
    background-size: cover;
    animation: CoinflipRoll 6s steps(199);
    animation-delay: .5s;
    animation-fill-mode: forwards;
    background-repeat: no-repeat;
    background-image: url("https://i.imgur.com/Mvek2Uy.png");
}

@keyframes CoinflipRoll {
    100% {
        background-position-y: -39800px;
    }
}
<small>Image is 248x12648</small>
<div class="coin"></div>

Upvotes: 1

Views: 305

Answers (2)

Temani Afif
Temani Afif

Reputation: 273483

Correct your code like below. You don't need a lot of complex value and you need to set the correct value to steps(). Your image contains 51 frames not 199

.coin {
  width: 200px;
  height: 200px;
  animation: CoinflipRoll 2s steps(51,jump-none) .5s forwards;
  background: url("https://i.imgur.com/Mvek2Uy.png") top/auto 5100%;
}

@keyframes CoinflipRoll {
  100% {
    background-position: bottom;
  }
}
<div class="coin"></div>

Upvotes: 2

Markido
Markido

Reputation: 459

The animation is moving the picture out of the frame. Look at the picture - its still there afterwards, just moved through all the "animation frames". So stop it before it is at the end but manipulating the end value

Upvotes: 0

Related Questions