Ensure consistency in CSS3 background color transitions

There are multiple elements on the webpage with background transitions that change from one color to another:

@-moz-keyframes backgroundTransition /* Firefox */ {
    0%   {background-color:#ff7b7b;}
    33%   {background-color:#7fceff;}
    66%   {background-color:#80e880;}
    100%   {background-color:#ff7b7b;}
}
@-webkit-keyframes backgroundTransition /* Safari and Chrome */{
    0%   {background-color:#ff7b7b;}
    33%   {background-color:#7fceff;}
    66%   {background-color:#80e880;}
    100%   {background-color:#ff7b7b;}
}

However, if an element is hidden using display: none and later revealed via JavaScript, its transition color does not match the other elements and begins the loop from the initial color.

Is there a way to make the transition consistent for all elements? Your input is appreciated.

javascriptjqueryhtmlcss

Answer №1

If you haven't already, try hiding the elements by setting their opacity:0 and then changing it to 1 to show them again. This way, the background color will smoothly transition along with all the other elements while keeping the element invisible.

By the way, the keyframes CSS directive is now widely supported by major browsers, eliminating the need for vendor prefixes.

document.querySelector("button").addEventListener("click", function(){
  document.querySelector(".hidden").classList.remove("hidden");
});
div {
  width:50px;
  height:50px;
  background-color:black;
  border:1px solid black;
  
  animation-duration: 8s;
  animation-name: backgroundTransition;
}

/* The hidden elements will not take up space in the
   normal document flow and will not be visible because
   they will be 100% transparent. Removing this
   class when needed reveals the element(s) and brings
   them back into the normal flow with a background color
   matching the other div elements. */
.hidden { opacity:0; position:absolute; }

@keyframes backgroundTransition{
0%   {background-color:#ff7b7b;}
  33%   {background-color:#7fceff;}
  66%   {background-color:#80e880;}
  100%   {background-color:#ff7b7b;}
}
<div></div>
<div class="hidden"></div>
<div></div>

<button>Click during the animation to reveal the hidden div,<br>which syncs its color with the other div elements</button>

Answer №2

It might be challenging to manage this using the visibility css attribute, or you may not able to do so because it always starts from zero whenever it is rendered.

Answer №3

Animations failed to apply to an element that was not being displayed by the browser, but they work when the element is 'hidden' ;) Consider using a different method to hide your element:

opacity: 0

height:0; width:0;

z-index: <val>

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

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: Th ...

htmltwitter-bootstrapcss

Retrieving ViewBag Data following a successful $.ajax post in C# .NET Razor

When I use ajax to post data, it successfully goes through. However, when I try to retrieve the posted data from ViewBag on the controller side, I encounter an issue. Here's the Ajax Code: $.ajax({ type: "POST", url: '../Home/ ...

c#jquery.netajaxasp.net-mvc

Troubleshooting my nodejs websocket chat for message sending glitches

The chat system is built on nodejs using websockets from socket.io library. While I have a client that also utilizes websockets from socket.io, I'm facing challenges in making the two communicate effectively. The issue seems to be with the client not ...

javascriptnode.jssocketswebsocket

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

I'm trying to implement Bootstraps Affix feature in a sticky subnav. <div class="container" data-spy="affix" data-offset-top="417" id="subnav"> I've adjusted the offset to ensure there's no "skip" or "jump" when the subnav sticks. Ho ...

javascriptjquerycsstwitter-bootstrapaffix

Error occurs when an arrow function is called before its function definition

console.log(addB(10, 15)); function addB(a, b) { return a + b; } console.log(addC(10, 15)); const addC = (a, b) => { return a + b; }; I attempted to convert a function into an arrow function and encountered the error "Cannot access 'addC&ap ...

javascriptnode.jsarrow-functions

The elastic image slideshow maintains the original size of the images and does not resize them

When utilizing the elastic image slider, I encounter a similar issue as described at Elastic Image Slideshow Not Resizing Properly. In the downloaded example, resizing the window works correctly. However, when trying to integrate the plugin with Twitter B ...

javascriptjquerytwitter-bootstrapslider

Login should only be tried when the error code is 403

I have encountered an issue with checking if the API token is expired. The process involves making a GET call, and if a 403 error is received from the API, then re-login is required. This is what I tried: app.get = async (body) => { return new Pro ...

javascriptnode.jsexpress

What is the CSS method for altering the color of a slider's runnable track upon selection?

Seeking assistance in changing the slider track color upon selection. Struggling to achieve the desired outcome of altering the color as it slides. CSS: /* Custom Styles */ .text-size-slider { line-height: 100%; font-size: 14px; position: relative ...

javascriptcssangularjscss-selectors

Update the VueJS application by loading and replacing the existing JSON data with new information

Is there a way to dynamically re-render the entire v-for loop and DOM after fetching and loading new JSON data to replace the current one? I want to be able to click on different options and have the products updated. Vue.use(VueResource); var produ ...

javascriptjsonvue.js

Calculating a 30-minute interval between two given times using JavaScript/jQuery

My goal is to generate a list of times between a specified start and stop time, with half-hour intervals. While I have achieved this using PHP, I now wish to accomplish the same task using JavaScript or jQuery. Here is a snippet of my PHP code which may ...

javascriptjquery

Using session variables on a different php page

Having trouble using a session variable in another page? I fetched data from a database and stored it in a variable, but when I attempt to use it on another page, I get an error saying 'undefined index'. See the code below - can someone help me s ...

phphtml

Choosing the primary camera on a web application with multiple rear cameras using WebRTC

Having a bit of trouble developing a web app that can capture images from the browser's back camera. The challenge lies in identifying which camera is the main one in a multi-camera setup. The issue we're running into is that each manufacturer u ...

javascriptandroidtypescriptwebrtcgetusermedia

Merging RXJS observable outputs into a single result

In my database, I have two nodes set up: users: {user1: {uid: 'user1', name: "John"}, user2: {uid: 'user2', name: "Mario"}} homework: {user1: {homeworkAnswer: "Sample answer"}} Some users may or may not have homework assigned to them. ...

javascriptangulartypescriptrxjsobservable

JQuery .click Event doesn't center elements even with transform-origin adjustment

In the JSfiddle provided below, you can see that after a click event occurs, two span (block) elements rotate 45deg to form an "X". However, both elements are slightly shifted left, creating an off-center "X" relative to the parent's true center-origi ...

javascriptjquerycsscenter

I am currently developing a user-friendly bug reporting system that is fully functional. However, I have encountered a persistent error message in the console related to Discord.js that I am determined to resolve

In coding this bot, we are using the Discord.js library and some custom functions to handle bug reports from users. The bugreport command allows users to submit their reports, which are then sent to a specific channel for further action. However, we encou ...

javascriptnode.jsdiscord.js

What is the best way to eliminate the left padding on a TimelineItem component?

When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...

javascripthtmlcssreactjsmaterial-ui

Ways to eliminate all attributes and their corresponding values within HTML tags

Hey there, I'm trying to strip away all the attribute values and styles from a tag in html Here's my Input: <div id="content"> <span id="span" data-span="a" aria-describedby="span">span</span> <p class="a b c" style=" ...

javascriptjquerynode.js

Unable to prepend '1' to the list

My goal is to display a list as '1 2 3...', but instead it is showing '0 1 2...' var totalLessons = $('.lesson-nav .mod.unit.less li').length; for (var i = 0; i < totalLessons; i++) { $('.lesson-nav .mod.unit.les ...

javascriptjquery

Exploring the HTML5 File API: Features and Capabilities

After looking into the File API, I'm curious about when all major browsers will fully support it: Firefox has supported it since version 3.6 Chrome since version 8.0 What about Opera and IE? Is the File API meant to replace flash-based uploaders li ...

htmlfileapi

Using React Bootstrap to conditionally render columns within an array map

Within my React application, I am currently utilizing the map function to generate Bootstrap columns in the JSX code of the render method. One specific attribute within the array object I'm mapping is named "taken." Depending on whether this attribute ...

javascriptreactjsreact-bootstrapconditional-rendering