"Creating a CSS3 animation for changing the background image source - a step-by-step

Unfortunately, the background-image cannot be animated with keyframes in the following way:

@keyframes kick{
    0%{background-image: url(images/img-man-1.png);}
    25%{background-image: url(images/img-man-2.png);}
    50%{background-image: url(images/img-man-3.png);}
    75%{background-image: url(images/img-man-4.png);}
    100%{background-image: url(images/img-man-5.png);}
}
.img-man{
    animation: kick 1.2s;
    animation-play-state: running;
    animation-iteration-count: infinite;
}

If you're looking for a method to achieve this effect using CSS3 or jQuery if necessary, please let me know.

jquerycssanimation

Answer №1

I have a strong feeling that this is exactly what you need.

Answer №2

Using javaScript for animations: 

let frames = 3;
const imgElement = document.getElementsByClassName('img-man')[0];
let frameCount = 0;
const animationInterval = setInterval(function() { 
    if (frameCount === frames) { clearInterval(animationInterval); return; }
    imgElement.style.backgroundImage = `url(images/img-man-${frameCount++}.png)`;
}, 500);

Answer №3

To achieve this unique effect, utilize the power of CSS3 animations and keyframes. Take a look at this Example.

.img-man
 {
  width: 200px;
  height: 200px;
  animation: kick 10s infinite;
  -webkit-animation: kick 10s infinite;
  background-size:200px 200px;
 }

Additionally, make sure to remove the line animation-play-state: running; from your code since "running" is already the default value. For more information, click here .

Wishing you success in implementing this!.

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

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

htmlcssheightfixed

Is there a way to eliminate a specific input box using the jquery remove function?

I've been working on some code and have run into an issue. Currently, the remove function only works on one input box that is created with the append function. I would like it to be able to work on every input box generated through the append function ...

javascriptjqueryjquery-ui

Conceal the div on larger screens and display it on mobile devices

I have a fixed navigation bar at the top of my website. By default, it is always visible on all pages, but I want to hide it on desktop screens and display it only on mobile devices. Here is what I have implemented: @media (min-width: 992px) { #sp-he ...

javascriptjqueryhtmlcsshide

Localization in ASP.NET MVC using unobtrusive jQuery

Is there a way to translate error messages in models without using DataAnnotations? For example, I only want to translate part of the message "The field XX is required" with jQuery globalization, without using [Required(ErrorMessageResourceName="----")] at ...

jqueryasp.netasp.net-mvclocalizationunobtrusive-validation

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Breaking down a div with jQuery - tips and tricks!

I have a question regarding jQuery. Consider the following structure: <div class="page"> <p>Lorem ipsum....</p> <p>Lorem ipsum....</p> ... </div> I want to transform it into this format: <div class="pa ...

javascriptjqueryhtml

When the input field is clicked, the file:/// URL is sent

Currently, my HTML page contains a form that includes an input field for URLs. Ideally, upon typing in the URL and clicking the button, I intend to be redirected to that website. However, the issue lies in the fact that instead of redirecting me to the p ...

javascriptjquery

Mixing React with jQuery in Gatsby: Incorporating jQuery Plugins into Your Gatsby Site

Previous description has been omitted as it is no longer relevant. I recently set up a new gatsby site and successfully integrated jquery, bootstrap, wow, and owl carousel. layout.js import './expose' import './main' expose.js impo ...

jqueryreactjswebpackgatsbywow.js

Masking input text to allow numbers only using either javascript or jquery

I have experience with javascript and jquery. My goal is to create a masking template for <input type="text"> This template should only accept numbers and automatically format the input with dashes after every two numbers typed. The desi ...

javascriptjqueryajaxinputnumbers

Maximize background width with a gradient that is compatible with web-based email clients such as Outlook and Gmail

Recently, I was given the task of creating a newsletter to support cancer fundraising. Excitedly, I accepted the assignment but encountered a frustrating issue with web-based email clients (such as outlook.com and gmail.com) not accepting some of my stylin ...

htmlcssemailcompatibility

What are the steps to automatically populate the location or name in the trip advisor widget?

I have encountered an issue with my website where I have multiple hotel lists but the trip advisor widget only shows one. Is there a solution, such as a script or other method, that can use variables to automatically set the location or name in the widget? ...

javascriptjqueryangularjs

I encountered a frustrating issue with saving user input data using localStorage

One of my goals is to store the current inputs even if the user refreshes or closes the browser. The issue I'm facing is that when I select Yes in the radio button, then refresh the page or close the browser and reopen it, the No button is checked wh ...

javascriptjqueryhtmllocal-storage

Developing SAPUI5: Construct a GenericTile featuring a centrally positioned icon

I'm having trouble creating a custom tile in SAP that inherits from sap.suite.ui.commons.GenericTile and only displays an icon centered in the middle of the tile. The standard aggregations and properties are causing issues as they position the icon on ...

htmlcsstilesapui5

Loading hover images in css through jQuery preloading

Is there a reliable method for preloading CSS hover images using jQuery that anyone knows of? My ideal scenario would involve adding a class (for example, "pre-load-hover") to any element needing preloading, and then implementing JavaScript in $(document) ...

jqueryhtmlcss

javascript utilize jquery to advance saved event

When it comes to hyperlinks, I am pausing some of my native click events to verify if the resulting page contains the desired content. After storing the jquery event object and performing some validations, my goal is to allow the event to continue as usua ...

javascriptjqueryeventsdom

Creating a responsive design that adapts to various image sizes

In my API response, I am receiving images of various sizes. To display these images on my HTML page, I have created a table containing 4 images. To ensure responsiveness, I have set the width of the table to 100%, each row (tr) to 100%, each cell (td) to 2 ...

htmlcss

Encountering the error message "Uncaught TypeError: Cannot read property 'addEventListener' of null with querySelector

I attempted using getElementsByClassName but encountered the same error, which is peculiar. I had to change <p id="trigger-overlay"> in my HTML to <p class="trigger-overlay"> error function toggleOverlay(){alert('fire');}; var tri ...

javascriptjquery

Fixing the Overflow Property in CSS

I just started learning about css, and I've encountered a problem with the code for the overflow property: div.hidden { background-color: #00FF00; width: 1000px; height: 1000px; overflow: hide; } ...

css

Fetching JSON data using Javascript/JQuery

My goal is to access JSON data from an online web service that queries a MySQL database for a specific string and use Javascript to present it on an HTML page. My challenge lies in effectively displaying the retrieved information. The relevant part of my ...

javascriptjqueryhtmljsonget

What is the best method for enclosing all text within an HTML document with a different element?

For example: FROM <div> whats up! <div> whats up2! </div> thank you for your help <div></div> </div> TO <div> <span>whats up!</span> <div><span> whats up2! </span&g ...

javascriptjqueryhtml