What causes the image to vanish once the CSS animation is activated?

Is there a reason why the image disappears after the animation completes? :/

.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 size is 248x12648</small>
<div class="coin"></div>

csscss-animations

Answer №1

Make the necessary adjustments to your code as shown below. It is important to keep the values simple and ensure that the correct value is set for steps(). Note that your image actually contains 50 frames, not 199.

.coin {
  width: 200px;
  height: 200px;
  animation: CoinflipRoll 2s steps(50) .5s forwards;
  background-image: url("https://i.imgur.com/Mvek2Uy.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

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

Answer №2

The image is being shifted out of the border. Pay attention to the image - it remains visible afterward, having traversed all the "animation frames". To prevent reaching the end, adjust the final value by halting it midway.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing navigation position while scrolling to a different anchor using fullpage.js

Currently, I have a lengthy scrolling webpage that utilizes fullpage.js. The navigation is fixed in position over the page and each active slide is highlighted by its corresponding link. My goal is to have the link move to the top position when it's ...

jquerycssbootstrap-4fullpage.jsslick.js

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

javascripthtmlcssnode.jsresponsive-design

The alternative text for the oversized image exceeds the boundaries

After setting the width and height for an image, along with testing overflow:hidden, I've encountered an issue where the alt text for a broken image overflows the bounds of the image and the image size is lost. How can I contain the alt text within th ...

htmlcss

Font and div placement varies on a mac within a WordPress environment

www.oihanevalbuenaredondo.be After styling my post titles in CSS using font-family: adobe arabic, I noticed that while they display correctly on my Windows machine, they appear in a basic font on Mac OS, Safari specifically. Why is it that Safari cannot r ...

htmlcsswordpressfontswidget

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...

css

Ways to eliminate the top space in the background image

After implementing a basic HTML code to add a background image to my webpage, I noticed there is still some empty space at the top of the page. I attempted to adjust the position of the background image using the following code, but it only lifted it upwar ...

javascripthtmlcss

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

What is preventing the buttons from filling the entire space of the parent element in this case?

https://i.stack.imgur.com/kbiWi.png I'm trying to figure out how to make the Repos and Stars buttons fill the entire height of their parent container, similar to the Github icon. Unfortunately, the code below is not achieving this effect. I attempted ...

javascripthtmlcssreactjsmaterial-ui

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

javascripthtmlcss

Blending HTML template and WordPress PHP file

I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...

phphtmlcsswordpress

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Even though I achieved the desired outcome in this example (http://jsfiddle.net/jcx3X/40/), I am intrigued by the reasons why this other scenario (http://jsfiddle.net/jcx3X/41/) does not work. What is the significance of the div being floated first in th ...

htmlcsswidth

What coding techniques can be used to create dynamic animation of a log stream in javascript/css

When I have a series of events in my browser, I want to display them as a list with a smooth animation effect. As each new event comes in, I'd like the existing items to slide down gracefully, making room for the new event to fade in at the top of the ...

javascriptjquerycssanimationcss-animations

Challenges with utilizing multiple backgrounds in CSS

<!DOCTYPE html> <html lang="en"> <head> <meta name="description" content=""> <meta name="author" content=""> <title>Main Website</title> <link href="css/main.css" rel="stylesheet"> </head> ...

htmlcss

Issues with undesirable spacing in CSS using the display property and table-cell display type

Having trouble grasping the concept of table and table-cell in css? See this example: http://jsfiddle.net/dd7h7/3/. HTML <div class="widget"> <div class="button"> <div class="content"> <div class="icon">A</div> ...

htmlcss

Launching an image link within the same location on the subsequent page to which it is directed

I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm lookin ...

javascripthtmljquerycss

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Showing child elements within a div using AngularJS

I am eager to create a straightforward AngularJS website that will showcase an initially hidden HTML element along with all of its children. Below is the HTML structure snippet I plan to use: <div class="hiddenStuff"> <h3>Game Over</h3&g ...

javascripthtmlcssangularjs

Navigate to the initial visible element on the specified webpage via the page hash link

In my handlebars HTML template, I have a partial view that includes different pieces of content for desktop and mobile. I use different CSS classes to hide and show these elements accordingly. <div class='hideOnMobile showOnDesktop'> < ...

javascriptjqueryhtmlcss

Creating a CSS class in a separate file for an element in Angular 4

Looking for some help with my code setup. Here's what I have: <div class="over"> Content </div> In my component file, this is what it looks like: @Component({ selector: 'app', templateUrl: './app.componen ...

cssangular

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js