Как сделать анимацию для grid-column-start / end?

Question

[Vann Damm]

Есть блок, который становится grid-column: 1 / 3 , соответсвенно он расширяется , но не плавно. Анимации для ячеек гридов не работаю. Но нашел такую конструкцию. Анимация сделанная с помощью @keyframes,как ее можно применить в данном случае?

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    @media screen and (max-width: 1378px) {
        position   : fixed;
        z-index    : 9999;
        width      : 60%;
        margin     : 155px 20% 0;
        animation  : grow-fixed 1s ease;
        @keyframes grow-fixed {
            0% {
                width : 60%;
                margin: 155px 20% 0;
            }

            100% {
                width : 80%;
                margin: 155px 10% 0;
            }
        }
        width      : 80%;
        margin     : 155px 10% 0;
        grid-column: 2 / 10;
        grid-row   : 3 / 4;
    }
    @media screen and (min-width: 1378px) {
        position   : fixed;
        z-index    : 9999;
        width      : 80%;
        margin     : 155px 10% 0;
        animation  : shrink-fixed 1s ease;
        @keyframes shrink-fixed {
            0% {
                width : 80%;
                margin: 155px 10% 0;
            }

            100% {
                width : 60%;
                margin: 155px 20% 0;
            }
        }
        width      : 60%;
        margin     : 155px 20% 0;
        grid-column: 3 / 9;
        grid-row   : 3 / 4;
    }

Answer 1

[Alexey Kalyuzhnyi]

Для такого решения рекомендую использовать GSAP и плагин Flip
https://greensock.com/docs/v3/Plugins/Flip

Comments

[Vann Damm]

Дело в том, что я бы саму верстку скорее переделал под trnasform, чем заносил бы плагины, хотелось бы только на css, поэтому буду пробовать как автор на keyframes. Либо сам бы переписал плагин , только бы ничего не заносить)

[Alexey Kalyuzhnyi]

Vann Damm, в целом если есть возмжность перепиать разметку малыми ресурсами, то согласен, лучше сделать так.

[Vann Damm]

Alexey Kalyuzhnyi, gridам уже сколько лет, а анимацию нативную для ячеек не завезли , очень обидно(. Придется переделывать