Clever Geek Handbook

Why is this CSS transition queue?

When you hover over, div

a color change occurs in the content div

before the color change affects span

. Why is this and how can I use it so that both animations happen at the same time? The reason for this * { transition: ... }

is that each site element is animated by default when its properties are changed.

http://jsfiddle.net/wf63jquz/

HTML:

<div>
    <span>Hello</span>
    Hola
</div>

CSS

*,
*:before,
*:after
{
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}

div {
    color: red;
}

div:hover
{
    color: green;
}

* Edit *

Eugh, did not think to check in other browsers. New question: Why is Chrome doing it wrong and how can I solve it for Chrome? I am guessing it might be a shared website issue, but I don't have a quick access to Safari to check.

+3


source to share


3 answers


Because of * .. if you use code like below it will give you the desired output:



div:before,div:after{
-moz-transition: 2s;
-o-transition: 2s;
-webkit-transition: 2s;
transition: 2s;}
0


source


try it



*,
*:before,
*:after
{
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}

div, span {
    color: red;
}

div:hover, span:hover
{
    color: green;
}
      

        
        
        
      

    
<div>
    <span>Hello</span>
    Hola
</div>
Run codeHide result


0


source


The problem with Chrome seems to be that it animates all standard HTML elements first and then processes the rest of the content.

To fix this problem, it seems like it is wrapping your content outside of the tag inside one. This way your HTML will be:

<div>
    <span>Hello</span>
    <span>Hola</span>
</div>

DEMO

As @Boltclock said, these "quirks" boil down to the fact that the transitions are still in the draft because nobody seems to get them perfectly perfect :)

0


source






More articles:


All Articles