517 Сегодня мы поговорим о CSS анимации при переходах с одних Media Queries на другие. Преимущество использования CSS очевидно — это простота и размер кода, поддержка аппаратного ускорения и отсутствие jQuery.
Вы, наверное, в курсе, что, в основном, анимация CSS строится на основе состояния :hover или добавлением класса, но еще можно использовать и media queries. Давайте посмотрим, как это работает!
CSS
Синтаксис создания анимации и переходов абсолютно идентичен, как, если бы вы создавали анимацию для состояния :hover, с той лишь разницей, что триггер, в данном случае, media queries:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* основное состояние */ #layout { position: relative; width: 900px; border: 1px solid #ccc; height: 200px; /* анимация ширины с заданной длительностью */ -webkit-transition: width 2s; -moz-transition: width 2s; -ms-transition: width 2s; } .child { top: 0; bottom: 0; width: 290px; position: absolute; opacity: 1; font-size: 20px; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); /* анимация прозрачности, left, ширины с заданной длительностью */ -webkit-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; -moz-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; -ms-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; } #child1 { left: 0; background: lightblue; } #child2 { left: 300px; background: lightgreen; } #child3 { left: 600px; background: lightyellow; } /* Когда ширина окна 860 px или меньше: - анимация первых двух элементов по ширине - анимация исчезания третьего элемента - анимация бэкргаунда - анимация размера шрифта в блоке */ @media screen and (max-width: 860px) { #layout { width: 600px; } .child { width: 290px; font-size: 12px; } #child1 { left: 0; background: blue; color: #fff; } #child2 { left: 300px; background: green; color: #fff; } #child3.child { /* hider */ opacity: 0; width: 0; } } |
Вы, наверное, думаете, зачем нужна такая анимация? Каково ее предназначение?
Использование анимации Media Queries больше всего подходит при смене ориентации мобильного устройства с портретного на ландшафтный и наоборот:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* основные стили */ #sidebar { -webkit-transition: opacity 2s; width: 300px; overflow: hidden; } /* портрет */ @media screen and (orientation:portrait) { #sidebar { opacity: 0; width: 0; } } /* ландшафт */ @media screen and (orientation:landscape) { #sidebar { opacity: 1; } } |
С помощью этого кода можно изящно скрывать и показывать панель при переключении режимов просмотра.
CSS анимация остается деликатесом в веб-дизайне, но с появлением практического применения, ситуация может измениться. С учетом вышеперечисленных достоинств использование различных эффектов при тех и иных триггерах совершенно точно будет набирать популярность. Например, при обслуживании сайта с адаптивным дизайном, то почему бы не попробовать создать некоторые эффекты?
