Переходы переходов на изменение отображения

Question

Я не знаю почему, но изменяя свойство отображения родительских перерывов на дочерние элементы.

HTML

<div class="grandfather"> 
    <div class="father"> 
     <div class="child1 children"></div> 
     <div class="child2 children"></div> 
    </div> 
</div> 

CSS

.grandfather{ 
    width: 500px; 
    height: 500px; 
    background: green; 
} 

.father{ 
    height: 250px; 
    background: red; 
    display: none; 
} 

.grandfather:hover .father{ 
    display: block; 
} 

.child1, 
.child2{ 
    width: 50px; 
    height: 50px; 
    background: blue; 
    display: inline-block; 
    opacity: 0; 
    transition: all 1s linear; 
} 

.grandfather:hover .children{ 
    opacity: 1; 
} 

Fiddle: http://jsfiddle.net/bdu3fno2/5/

Примечание: Я знаю, что изменение дисплей не является необходимым в данном ок se, я мог бы просто изменить непрозрачность, и все будет хорошо, но интересно узнать, почему браузеры ведут себя так: это какая-то оптимизация? Я не думаю, что это часть спецификации CSS.

Answer 1

использование opacity с visibility

.grandfather { 
 
    width: 500px; 
 
    height: 500px; 
 
    background: green; 
 
} 
 
.father { 
 
    height: 250px; 
 
    background: red; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    transition: all 1s linear; 
 
} 
 
.grandfather:hover .father { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
.child1, 
 
.child2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
    display: inline-block; 
 
    opacity: 0; 
 
    transition: all 1s linear; 
 
} 
 
.grandfather:hover .children { 
 
    opacity: 1; 
 
}

<div class="grandfather"> 
 
    <div class="father"> 
 
    <div class="child1 children"></div> 
 
    <div class="child2 children"></div> 
 
    </div> 
 
</div>