Unexpected rendering occurs when using a CSS double transition

In my React application, I am working on implementing smooth page transitions for a more visually appealing user experience. While using simple fade-in/fade-out transitions, I have noticed that transitions between pages with similar content are not as smooth as I would like them to be. This is particularly evident when only the text changes between these pages. To illustrate this issue, you can refer to the example provided in the codepen link below.

My understanding of the transition effect is that a linear fade-out of layer A overlapping with a similar linear fade-in of layer B should result in a constant color for pixels that are the same in both layers. However, as shown in the codepen example, the transition does not produce the desired effect, and I am unsure why this is happening. Is there a way to achieve the desired result where color B replaces color A for different pixels, but remains the same for identical pixels?

Visit Codepen Example

Below is the code snippet for the corresponding HTML:

<div class="a1">a1 div</div>
<div class="a2 hidden">a2 div</div>
<button>Switch divs<button>

CSS:

.a1, .a2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: red;
  transition: all .5s linear;
}
.hidden { opacity: 0; }
button {
  position: absolute;
  top: 10px;
  left: 10px;
}

JS:

window.addEventListener("load", () => {
 document.querySelector("button").addEventListener("click", () => {
   document
     .querySelectorAll("div")
     .forEach(d => d.classList.toggle("hidden"));
  });
});

UPDATE: I have managed to partially address the issue by adjusting the transparency of the underlying layer. By keeping the opacity of the underlying layer at 1, the second layer effectively hides the background, resulting in a smoother transition when the foremost layer fades in. While this solution may not achieve a perfect cross-fade effect, it has significantly improved the visual outcome on the screen.

Answer №1

When transitioning between layers, they appear transparent, allowing the white background to show through.

Check out this interesting post for some formulas explaining why the resulting color isn't a solid rgb(255,0,0). The introduction of green and blue channels plays a role.

One might assume that combining 90% red with 10% red would result in 100% red, but each layer allows some 'white light' to come through. Here's the breakdown:

As stated in the post, the formula for a two-layer image is:

Y = p*T+(1-p)*B where...
p represents the opacity 0...1 of the top layer,
T = rgb value of the top layer color,
B is the rgb value of the fully opaque bottom layer.
Y is the equivalent fully opaque color. 

For example, for rgba(255, 0, 0, 0.9) on a white background, the resulting color is:

r = 0.9 * 255 + 0.1 * 255 = 255
g = 0.9 * 0   + 0.1 * 255 = 25.5
b = 0.9 * 0   + 0.1 * 255 = 25.5

Adding rgba(255, 0, 0, 0.1) to that result, we get:

r = 0.1 * 255 + 0.9 * 255 = 255
g = 0.1 * 0   + 0.9 * 25.5 = 22.9
b = 0.1 * 0   + 0.9 * 25.5 = 22.9

The presence of additional green and blue channels shifts the color closer to white.

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

What is the best way to customize a div depending on the validation status of all reactive form fields within it?

I am facing a challenge with a rather complex form that contains multiple fields. Some of these fields are used to create logical blocks, and I would like to emphasize the surrounding div if any of these included fields are invalid. Can you suggest the bes ...

Using a zoom background image in an HTML document without any accompanying text

I am trying to create a zoom effect on a background image without affecting the text overlaying it. Here is the CSS code: .page1-box { width: 1200px; height:800px; overflow:hidden; } .page1 { width: 100%; height: 100%; background: ...

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

I recently tried using the following CSS code: :host /deep/ ng2-smart-table {font-size:22px;} However, despite implementing this code, I have not noticed any change in the font size. ...

Tips for creating a line break within a Bootstrap progress bar when the text exceeds the width of a div

By default, the progress bar displays text inside the portion that has progress. To ensure the text does not wrap prematurely, use white-space: nowrap; How can the issue of long text within a div be resolved without using JavaScript? Is there a way to ma ...

When JSF renders bootstrap buttons, they appear without any horizontal padding

There is a strange behavior that I cannot explain... I am working with a series of buttons: <h:commandButton value="foo" actionListener="#{foo.foo}" styleClass="btn btn-danger"> <f:ajax render=":form"></f:ajax> </h:co ...

Carousel with Horizontal Scrolling (Pause)

I stumbled upon this incredible "Pause Scroll (Horizontal) Parallax" created by Khaled on Codepen. One thing that has been puzzling me is how to make it run multiple times. It appears that when you try to apply it more than once, the duplicates ...

What is the equivalent of a very deep selector in TailwindCSS?

When working with the v-deep selector to customize the appearance of tiptap, a rich text editor, accessing the .ProseMirror class in SCSS would look like this: editor-content { // ... styles &::v-deep(.ProseMirror) { // ... styles } } ...

HTML steps for smooth scrolling to the top and bottom of a list

My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Belo ...

Is there a way to position one DIV behind another?

Hey, I'm working on my first project and running into some trouble with divs. I'm trying to position the firework behind the central text but can't figure it out. Can anyone lend a hand? I need to add more details in order to submit the que ...

Identifying the completion of scrolling within a container

I'm facing a challenge with my dynamic website that has numerous blog posts. My goal is to initially load only four posts and then add another four as the user scrolls to the end of the page. While I have figured out how to handle this on the backend, ...

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

Dynamic content in a CSS animation that rolls credits as they scroll

Currently, I'm working on creating a credit scrolling effect that pulls data from the JustGiving API to display a list of donors. I have successfully populated the list of donors and connected to the API without any issues. However, the challenge lies ...

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

Showcasing an item hidden behind text and a dropdown menu

I have made changes to the background image in my Wordpress theme and now I want to display another image on top of the white content area. To achieve this, I used the following code: img style="position: absolute; top:244px; left: 220px;" src="http://ww ...

Why Does My Bootstrap Borderless Table Still Show a Border?

Just starting out with Boostrap and struggling to identify what might be causing this issue on my Create view and how to resolve it. https://i.sstatic.net/nWNkc.jpg Below is the relevant section of my view: <h3 class="text-primary pl-3"> ...

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

Placing information on the opposite sides of a table cell

I am currently working on a monthly calendar table where each cell displays the date in the top left corner and has a "+" button in the bottom right corner for adding content to that day. Everything works fine when all cells have the same height, but it br ...

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

Is it possible to equalize the size of these list elements?

I'm new to working with HTML and CSS. My goal is to have navigation buttons that are all the same size, occupying one third of the width of the panel they are placed in. I have access to the original code but can only make adjustments rather than comp ...