effect_tw
@effect_tw

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

Есть блок, который становится 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;
    }
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 1
AlexCSS
@AlexCSS
Font-end and WordPress developer
Для такого решения рекомендую использовать GSAP и плагин Flip
https://greensock.com/docs/v3/Plugins/Flip
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы