Chrome page loading with smooth color transitions

Question

Chrome page loading with smooth color transitions

Setting global colors on links and transitions on their color:

a {
  color: blue;
  transition: color 300ms linear; }

Later in the code, there's more specific styling for links in the navigation:

nav a { color: red; }
nav a:hover { color: black; }

Here's the simple HTML structure:

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

Expected Behavior:

Navigation links inherit color transition
Hovering on navigation links smoothly changes their color

Issue: When the page loads in Chrome, links start with a default color or the global link color before transitioning to the correct color immediately.

This issue seems to be Chrome-specific. Attempted to replicate it on JSFiddle, but it didn't occur there.

Is there a way to prevent the transition from happening on page load?

css google-chrome transition

Answer 1

Answer №1

I encountered a similar issue that didn't bother me until I noticed that the initial transition was not starting properly, resulting in an unintended color on my button.

Fortunately, I came across a helpful post on css-tricks that provided a solution to rectify my problem.

http://css-tricks.com/transitions-only-after-page-load/

The suggested fix involves disabling all animations until the dom is fully loaded. If you're using Angular, you can eliminate the class using ng-init or any other directive.

I hope this information proves useful to you.

Answer 2

I encountered a similar issue that didn't bother me until I noticed that the initial transition was not starting properly, resulting in an unintended color on my button.

Fortunately, I came across a helpful post on css-tricks that provided a solution to rectify my problem.

http://css-tricks.com/transitions-only-after-page-load/

The suggested fix involves disabling all animations until the dom is fully loaded. If you're using Angular, you can eliminate the class using ng-init or any other directive.

I hope this information proves useful to you.

Answer 3

Answer №2

After extensive research on setting conditions for an element's parent, I discovered that the available relative selectors such as :has(), :parent, and :not() were not able to resolve the issue at hand.
It seems there may not be a straightforward solution to this problem (although I would be delighted to be proven wrong).
However, I do have two alternative ideas that may be worth considering!

Firstly, consider placing the transition within the hover state of the element.
By doing this, you can avoid any transition conflicts in CSS, as shown in the example below:


a:hover {
    transition: all 1s; // including vendor prefixes
    color: #666;
}

nav a:hover {
    transition: all 1s; // including vendor prefixes
    color: #AAA;
}

Alternatively, you can differentiate the <a></a> tags by assigning specific classes and selecting them accordingly, as demonstrated here:


a.parentIsNotNav {
    // styles here
}

a.parentIsNav {
    // styles here
}

Answer 4

After extensive research on setting conditions for an element's parent, I discovered that the available relative selectors such as :has(), :parent, and :not() were not able to resolve the issue at hand.
It seems there may not be a straightforward solution to this problem (although I would be delighted to be proven wrong).
However, I do have two alternative ideas that may be worth considering!

Firstly, consider placing the transition within the hover state of the element.
By doing this, you can avoid any transition conflicts in CSS, as shown in the example below:


a:hover {
    transition: all 1s; // including vendor prefixes
    color: #666;
}

nav a:hover {
    transition: all 1s; // including vendor prefixes
    color: #AAA;
}

Alternatively, you can differentiate the <a></a> tags by assigning specific classes and selecting them accordingly, as demonstrated here:


a.parentIsNotNav {
    // styles here
}

a.parentIsNav {
    // styles here
}

Chrome page loading with smooth color transitions

Answer №1

Answer №2

Similar questions

When the React component's state is updated, an animation is triggered in a subcomponent connected to the parent component

Leveraging Flexbox and flexGrow in conjunction with Textfield

Stop the border from curving along with the container's border radius

contenteditable -- Utilizing AngularJS to create a block element for the title only

Using jQuery to create a dynamically moving div that forms an endless wall

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

The radio button default selection is checked, but the desired styles are not being applied

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

Horizontal rule spans the full width of the content, appearing within an ordered list

What are some ways to remove scroll bars from an iframe?

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

CSS transformation incomplete

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Blurring of text that occurs after resizing in CSS

Steps to shorten HTML content while maintaining consistent column width

When it comes to choosing between CSS and Angular Animations for supporting animations on both browsers and NativeScript mobile applications, which approach is more effective?

Position the previous and next buttons next to the thumbnail images

Generate an adjustable grid layout (with rows and columns) to display information retrieved from an API request

div not recognizing the minimum height specified in percentage

What are some effective methods for troubleshooting unidentified JavaScript functions within Chrome's performance analyzer?