The animation for the CSS background image simply refuses to cooperate

My goal is to create a CSS background animation using the Body tag. Below is the code I am currently using:

body
{
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
@keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
@-webkit-keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}

However, when I apply this code, the background only transitions from white to blue without displaying the image. The correct image directory is provided and works if set as a static background image. Is there any particular reason why the image isn't showing up in the animation?

Answer №1

Animating a background image is not supported as you cannot tween the property. Therefore, keyframe animations won't work with it. Instead, consider using the following code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{background:url('Space.png');}

#frame
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%; /* or page height in px */
width: 100%; /* or page width in px */
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
@keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
@-webkit-keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
</style>
</head>
<body>
<div id="frame">
<--- Page contents --->
</div> 
</body>
</html>

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

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

CSS - Is there a way to alter the arrangement of DIVs depending on the size of the screen?

My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below... div1 div2 div3 I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they sho ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

Vertically align all items within the div using Bootstrap to achieve perfect centering

I've been working on centering everything within this div vertically, and I've encountered some challenges along the way. Initially, I ensured that my background view extends my container nicely across the screen. Now, I'm looking to create ...

Different options exist for top layers with flexible widths aside from using position: absolute

The only method I'm aware of to place a layer on top is by using position: absolute. https://i.sstatic.net/R4j8i.jpg (favoring top, disliking bottom) However, this approach often prevents dynamic scaling with the rest of the page. You can attempt ...

Creating a grid cell that spans the entire grid width

Snippet of CSS Code: .wrapper { display: grid; position: relative; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vh; width: 100%; } .prova { border: 1px solid; } .wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; ...

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Looking for a way to style odd and even rows differently in my dynamically generated table using ngFor directive in angular2. *ngIf="AreThereMyOldMessages" *ngFor="let oldm of MyOldMessages;let i=index" *ngIf="AreThereMyNe ...

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

Responsive tables in Bootstrap 4 that are nested

I am currently utilizing Bootstrap 4. I have a complex table structure where I want only the second column and onward to be scrollable. The challenge is making this specific part of the table responsive while keeping the rest static. I attempted to nest a ...

Search bar that automatically adjusts based on the size of the containing div

https://i.stack.imgur.com/wtn8K.gif I'm interested in learning how to achieve a layout similar to this. Here's an example of what I've created: <div class="header-con"> <div class="search-bar-con"> <input type ...

Having trouble retrieving the text of an element using Selenium

Looking at the DOM element provided: <span class="styles__Content-rlm06o-1 ixoRjG">20.00000000</span> I am attempting to extract the value 20.00000000 using the following Python code: text = driver.find_elements_by_xpath("//*[@c ...

Solving the MIME problem in Codeigniter's Upload Class

Recently, I've encountered an issue with uploading images using the CodeIgniter Upload Class. Everything was working fine until a few days back when certain images started causing problems during the upload process. To investigate the problem further, ...

Utilizing JavaScript to arrange the dots around the circle proves to be glitchy

I am having trouble positioning dots around a circle. The top and bottom points are not aligning properly, resulting in a buggy display. What could be causing this issue? How can I fix this problem? $(function(){ var globe = $('#center') ...

Facing compatibility problems with JavaScript and Cascading Style Sheets in Google Chrome?

Welcome to the site . Let's address a couple of issues with JavaScript and CSS: Firstly, the JS code seems to be malfunctioning only in Chrome, throwing an error that reads: 'Uncaught TypeError: Object [object Object] has no method 'on prij ...