Можно ли анимировать "сетку-столбец"?

Question

Я установил transition: all ease-in-out 1s;, но изменение свойств grid-column аналогичным образом не работает с transition.

Есть ли здесь другой способ использования анимации?

<div class="projects">
    <div class="project" style="background: url(img/p1.png) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p2.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p3.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p4.png) center no-repeat / cover"></div>
</div>

.projects {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-auto-rows: 500px;
}
.project {
    width: 100%;
    transition: all ease-in-out 1s;
}
.project:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.project:nth-child(1):hover {
    grid-column: 1/3;
    z-index: 2;
}

Я загрузил облегченную версию на codepen

Answer 1

Это не кажется, что вы можете, в том смысле, что вы имеете в виду, анимировать grid-column, основываясь на документации в Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

Тип анимации столбца сеткиравно discrete, что означает, что нет "твининга" или интерполяции.

Это облом.

Есть несколько хакерских (или в других случаях, JS-тяжелых) обходных путей, но YMMV в зависимости от того, сколько усилий вы хотите вложить в него.См. Эту ветку, например:

анимация плавного изменения столбца сетки CSS

Answer 2

Вы можете смоделировать такой эффект, используя маржу, как показано ниже:

.projects {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-auto-rows: 500px;
}
.project {
    transition: 
      margin ease-in-out 1s,
      z-index 0s 1s;
}
.project:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    z-index:0;
}
.project:nth-child(1):hover {
    margin-right:-200%;
    z-index: 2;
}

<div class="projects">
    <div class="project" style="background: url(https://picsum.photos/200/300?image=0) center no-repeat / cover"></div>
    <div class="project" style="background: url(https://picsum.photos/200/300?image=1069) center no-repeat / cover"></div>
    <div class="project" style="background: url(https://picsum.photos/200/300?image=5) center no-repeat / cover"></div>
    <div class="project" style="background: url(https://picsum.photos/200/300?image=10) center no-repeat / cover"></div>
</div>

Похожие: Почему при наведении на них надписки расширяются только некоторые из моих CSS-таблиц?