Переходы CSS - Мне нужно объяснение

Question

Я пытался переместить некоторые элементы с переходом в CSS. Я сделал это нормально, добавив отдельный селектор для каждого элемента, который я хочу переместить, но он не работает, когда я использую один селектор для всех (они все равно остаются в одном и том же месте). Может кто-нибудь объяснить, почему это не работает?

body { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .block { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .part1 { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: relative; 
 
\t \t z-index: 1; 
 
\t } 
 

 
\t .part { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: absolute; 
 
\t \t transition: top 2s ease-in, left 2s ease-in, right 2s ease-in; 
 
\t } 
 

 
\t .block .part:nth-child(2) { 
 
\t \t top: 100px; 
 
\t \t left: 100px; 
 
\t } 
 

 
\t .block .part:nth-child(3) { 
 
\t \t top: 0; 
 
\t \t left: 200px; 
 
\t } 
 

 
\t .block .part:nth-child(4) { 
 
\t \t top: 0; 
 
\t \t right: 200px; 
 
\t } 
 

 
\t .block .part:last-child { 
 
\t \t top: 100px; 
 
\t \t right: 100px; 
 
\t } 
 

 
\t .block .part1:hover ~ .part { 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t \t right: 0; 
 
\t }

<span class="block"> 
 
\t \t <span class="part1">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
</span>

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

Вот рабочий фрагмент:

body { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .block { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .part1 { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: relative; 
 
\t \t z-index: 1; 
 
\t } 
 

 
\t .part { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: absolute; 
 
\t \t transition: top 2s ease-in, left 2s ease-in, right 2s ease-in; 
 
\t } 
 

 
\t .block .part:nth-child(2) { 
 
\t \t top: 100px; 
 
\t \t left: 100px; 
 
\t } 
 

 
\t .block .part:nth-child(3) { 
 
\t \t top: 0; 
 
\t \t left: 200px; 
 
\t } 
 

 
\t .block .part:nth-child(4) { 
 
\t \t top: 0; 
 
\t \t right: 200px; 
 
\t } 
 

 
\t .block .part:last-child { 
 
\t \t top: 100px; 
 
\t \t right: 100px; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(2) { 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(3) { 
 
\t \t left: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(4) { 
 
\t \t right: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:last-child { 
 
\t \t top: 0; 
 
\t \t right: 0; 
 
\t }

<span class="block"> 
 
\t \t <span class="part1">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t </span>

Почему это происходит? Я не мог найти ответ в документации.

Answer 1

Ваша проблема в том, что когда вы одни и те же :hover правило, вы устанавливаете left: 0 на своих четвертом и пятом элементов, поэтому они собираются, чтобы получить соответственно positionated их родителей, который является относительным (.block не), то есть нет места для них оживить, как вы желаете. Когда вы используете отдельный селектор, left остается за его значением по умолчанию auto, так что right правильно анимирует эти два элемента.

Если вы не указали left или right, их значением по умолчанию является auto, а не 0. C heck MDN docs.

Answer 2

Хотя @Juan уже ответил, вы можете использовать переводную форму вместо абсолютного положения вверху слева. Вот статья о: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

body { 
    text-align: center; 
} 

.block { 
    position: relative; 
    display: inline-block; 
} 

.part1 { 
    font-family: Arial; 
    font-size: 50px; 
    font-weight: bold; 
    opacity: 0.2; 
    position: relative; 
    z-index: 1; 
} 

.part { 
    font-family: Arial; 
    font-size: 50px; 
    font-weight: bold; 
    opacity: 0.2; 
    position: absolute; 
display:block; 
    transition: all 2s linear; 
} 

.block .part:nth-child(2) { 
top:0; 
left:0; 

transform:translate(100px,100px); 
} 

.block .part:nth-child(3) { 
top:0; 
left:0; 
transform:translate(200px,0); 
} 

.block .part:nth-child(4) { 
top:0; 
left:0; 
transform:translate(-200px,0); 

} 

.block .part:last-child { 
top:0; 
left:0; 
transform:translate(-100px,100px); 

} 

.block .part1:hover ~ .part { 
    transform: translate(0,0); 
}