Как анимировать медиа запросы?!

Медиа запросы

Повсюду есть респонсив дизайн, и если вы используете фреймворк или пишете медиа-запросы самостоятельно, некоторые элементы на вашей странице обязаны перемещаться и масштабироваться.
Если ваши медиа запросы основаны на размере браузера и он был изменён, то тогда ваши элементы тоже должны стать на место в зависимости от размеров. Добавление анимации к такому функционалу всегда предаст уникальности любому адапитвному веб-сайту. В данной статье речь пойдет о том, как легко можно добавить дополнительные штрихи, анимировав ширину и прозрачность элементов между медиа запросами.

Разметка

В этом простом примере, мы будем использовать div, содержащий 3 маленьких div. Они будут масштабироваться в соответствии с размером окна браузера. HTML довольно прост здесь:

<div class="layout">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Теперь, наш основной CSS разместит три коробки внутри основного div, а также, в соответствии c margin справа:

.layout {
    width:960px;
    height:600px;
    background:#b34d6f;
    margin:auto;
}
.box {
    width:300px;
    height:200px;
    margin-right:25px;
    background:#4d77b3;
    display:inline-block;
    margin-top:50px;
}
.box:last-child {
    margin-right:0px;
}

Это наш основной макет, без медиа запросов. Эта разметка не будет адаптироваться, если изменится viewport. Теперь, когда наша основа на месте, давайте перейдем к главному.

Добавление медиа запросов

В нынешние времена, медиа запросы используются довольно часто. Большинство веб-дизайнеров хорошо их понимают, но в случае, если это ваш первый раз, вот вам краткое напоминание: медиа запросы проверяют способности устройства, которое вы используете (ширина, ориентация и разрешение), и они работают на конкретном CSS, если условия указанные для медиа запроса, были выполнены. В нашем примере мы будем использовать два запроса, которые будут проверять, если браузер меньше чем 960px и 660px. Затем мы установим ширину элемента соответственно, мы также скроем последний child div так, чтобы у двух других было больше пространства:

@media screen and (max-width:960px) {
    .layout {
        width: 870px;
    }
    .box {
        width:270px;
    }
}
@media screen and (max-width: 660px) {
    .layout {
        width:570px;
    }
    .box {
        width:170px;
    }
    .box:last-child {
        opacity:0;
    }
}

Это все что нам нужно для медиа запросов. Обратите внимание, очень важно, чтоб этот код был размещен под исходный код CSS, для того чтобы медиа запросы переписали код над ними. Если сейчас проверить ваш файл, то вы увидите, что размер div меняются, и прозрачность последнего child div меняется при изменении размеров окна браузера.

Вы заметите, что для того чтобы скрыть последний child div, мы ставим его прозрачность на 0, вместо display:none. Это потому, что мы хотим иметь возможность оживить атрибуты – у прозрачности есть различные градусы, в то время как у display есть два варианта true или false(и поэтому они не могут быть анимированы).

Добавление анимации

CSS анимация доказала свою удобность при выполнении этих маленьких анимаций, которые мы использовали для работы в jQuery(анимация цвета, ширины и прозрачности).
Так как мы хотим полностью оживить всю страницу, мы будем используем “*” CSS селектор и зададим нашу анимацию. CSS анимации деградируют изящно, но вам также нужно добавить префиксы, для максимальной поддержки всеми браузерами:

*{
    -webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;
}

09-03-2016