Как правильно использовать анимацию CSS3: учебник, примеры кодов и примеры

Статья написана:
  • Дизайн веб-сайта
  • Обновлено: Aug 28, 2013

Когда мы используем JS и jQuery, у нас есть полный контроль над анимациями, и мы можем создать некоторые потрясающие эффекты, но цена довольно высока. Время обработки, совместимость между браузерами (например, мобильные устройства, в JS), и сама сложность кода - это моменты, которые мы должны иметь в виду при создании анимированных интерфейсов.

Итак, сегодня мы увидим, как избежать JS с помощью анимации и переходов CSS. Мы обсудим основные шаги к некоторым удивительным эффектам, например, аккордеонным панелям и анимированным подменю.

Возьмите место, блокнот и настоящий браузер (ничего, кроме IE), и давайте начнем.

Разогрев

У нас есть немало преимуществ (и недостатков, как все в нашей жизни) в использовании анимации CSS. Если вам нужно продать их своему боссу или клиенту, это то, что вы должны иметь в виду:

  • Они потенциально быстрее, поскольку они могут использовать аппаратное ускорение (как реализации HTML5)
  • Они будут лучше работать на мобильных устройствах и не нуждаются в конкретном коде для отслеживания событий касания
  • JS нуждается в интерпретации браузером, и возможности разрыва браузера намного больше. Поэтому, когда CSS терпит неудачу, он терпит неудачу, пока JS может сломать всю страницу
  • У них неплохая поддержка браузера (этот сайт поможет вам проверить определенную статистику: http://caniuse.com/#search )

Примеры анимации CSS3

Прежде чем мы начнем с сути этого поста, давайте посмотрим на некоторые красивые анимации, сделанные на чистом CSS.

Чистый CSS Twitter Fail Whale

Анимированный неудавшийся кит

Сделано Стивеном Деннисом, см. это в действии.

Чистая прокрутка кокса COS
Примеры анимации CSS 3: Прокрутка кокса может

Сделанный Романом Кортесом, см. это в действии.

Чистый хобби

Примеры анимации CSS 3: Прогулки

Сделано Эндрю Хойером, см. это в действии.

Грязные руки

Давайте начнем код. Мы будем использовать много псевдо-классов CSS для запуска анимации. Честно говоря, многие разработчики рекомендуют вам использовать JS для активации и деактивации анимаций, но здесь мы увидим более простой способ:

#test {background: red; } #test: hover {background: green; } #test: active {background: blue; } #test: target {background: black; }

У нас есть несколько других псевдоклассах, но у вас есть идея! Итак, вот что произойдет, если вы нажмете элемент #test (предположим, что это ссылка):

  • Нормальное состояние: фон будет красным
  • Наведение: когда мышь входит в область элемента, она будет иметь зеленый фон
  • Активен: когда вы нажимаете на него курсор, и пока кнопка мыши все еще нажата, цвет фона будет синим
  • Цель: если на текущей странице есть #test в URL, этот элемент будет черным

Каждый из них может использоваться для анимации CSS, например, вы можете создавать ссылки 2 для активации и деактивации анимации CSS с использованием целевого псевдоэлемента с помощью этого кода:

<a href='#test'> активировать </a> <a href='#'> деактивировать </a>

Переходы CSS

Переход CSS будет изменяться от начального до конечного состояния плавно. Таким образом, вы определяете в главном селекторе, используя свойство «переход», время и каждое свойство, которое будет затронуто, и как должна быть анимация. Давайте посмотрим пример:

.test {/ * функция хронометража длительности свойства перехода, * / color: blue; переход: цвет 2s, шрифт 2 размера шрифта; } .test: hover {color: red; } .test: active {font-size: 200%; }

Когда вы наведете элемент .test, он постепенно изменит цвет от синего до красного (какая хорошая палитра, да?). Когда вы нажимаете на элемент, размер шрифта будет постепенно увеличиваться до 200% от размера шрифта по умолчанию.

У нас также есть свойство «переходного времени», которое устанавливается как облегчение, так как «время», доступное для анимации, будет потрачено. Вот возможные значения:

  • Линейный: с той же скоростью от начала до конца
  • Простота: Медленный старт
  • Ослабление: Медленный конец
  • Легкость: медленный старт, быстрый посередине, затем медленный конец
  • Ослабление: медленный старт, медленный конец
  • Cubic-bezier (a, b, c, d): Пользовательская скорость

Кубическая функция Безье создаст пользовательскую анимацию с номерами 4, которая варьируется от 0 до 1, представляя математическую кривую для продолжительности X анимации.

Для лучшей совместимости с браузером вы должны рассмотреть использование префиксов поставщиков для Opera, Firefox и webkit следующим образом:

div {width: 400px; -переход: ширина 2s; -моз-переход: ширина 2s; -webkit-transition: ширина 2s; переход: ширина 2s; }

Кроме того, вы можете использовать медиа-запросы для определения разных переходов в зависимости от ширины браузера (мобильных устройств, планшетов). Это простой пример:

body {font-size: 1em; } экран @media и (max-width: 800px) {body {font-size: 0.8em; }} @media screen and (max-width: 400px) {body {Размер шрифта: 0.7em; }}

Здесь размер шрифта будет изменен внезапно при увеличении ширины браузера. Этот код предотвратит это, давая гораздо более плавный переход:

body {-o-transition: font-size .5s линейный; -moz-transition: размер шрифта .5s линейный; -webkit-transition: размер шрифта .5s линейный; переход: размер шрифта .5s линейный; }

Вы можете использовать это также, если у вас есть разные дисплеи или размеры для портрета / пейзажа, если вы хотите изменить ширину, цвета, paddings, отображение меню.

Анимация по CSS - начинается настоящая забава

Анимация представляет собой последовательность переходов, определенных в одном селекторе. Чтобы определить анимацию CSS, вам необходимо следовать шагам 2.

Правило @keyframe используется для определения последовательности шагов анимации, и оно определяется уникальным именем и стилями, которые описывают, как работает эта анимация. Как обычно, нам понадобятся некоторые префиксы поставщиков, как в этом примере:

/ * один и тот же код для каждого поставщика * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * имя анимации * / @keyframe my-animation {/ * селектор кадров * / 0% {/ * стиль рамки * / Слева: 0px; Вверху: 0px; } 25% {Слева: 200px; Вверху: 0px; } 50% {Слева: 200px; Вверху: 200px; } 75% {Слева: 0px; Вверху: 200px; } 100% {Слева: 0px; Вверху: 0px; }}

Таким образом, каждый стиль определяется фреймом / таймфреймом (например, кадры из флэш-анимации) в процентах и ​​стилями, которые должны применяться там. Этот ключевой кадр, например, говорит, что элемент будет перемещаться влево, затем вверху, затем вправо, затем вниз.

После того, как вы выполнили шаг 1 и создали свой ключевой кадр, вы можете применить его к элементу. Тогда мы будем использовать почти ту же логику, что и мы, с переходом CSS, разница в том, что теперь наш «переход» представляет собой сложную анимацию.

Чтобы применить его, мы будем использовать свойство анимации, и у него есть под-свойства 7:

  • Имя: этот уникальный идентификатор
  • Продолжительность: сколько времени потребуется от 0% до 100%
  • Функция синхронизации: в значительной степени такая же, как функция синхронизации времени
  • Задержка: сколько времени потребуется, чтобы запустить 0%
  • Счетчик итераций: сколько повторений мы будем иметь («бесконечный» для бесконечного цикла)
  • Направление: нормальное или альтернативное (обратное)
  • Состояние воспроизведения: если анимация работает или приостановлена

Это применит нашу анимацию к элементу #test, если это цель страницы:

#test: target {/ * animation-name | продолжительность | функция времени | задержка | количество итераций | направление | play-state * / animation: my-animation 10s линейный 0s бесконечный нормальный ход; }

Имея это в виду, мы можем создать несколько удивительных примеров.

Только аккордеон CSS

Мы создадим складные панели, используя анимацию CSS. Вот основная структура HTML:

<div class = "accordion"> <a href="#tab1"> Вкладка 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> вкладка 2 </a> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> вкладка 3 </a> <div id =" tab3 "> <p> TEXT 3 </ p> </ div> </ div>

Это будет просто создавать панели и ссылку, которая будет запускать каждый из них. И здесь происходит волшебство:

/ * любой div внутри аккордеона * / .accordion div {/ * по умолчанию скрыт * / height: 0; переполнение: скрытое; / * черная магия * / переход: высота 1s; } / * когда упомянутый div является целью * / .accordion div: target {/ * height: auto не будет работать, но это будет работать нормально * / height: 80px; }

Довольно просто, да? И вы всю свою жизнь использовали JS для этого? :)

Меню только CSS с подменю

И это еще одно довольно простое приложение. На вашем сайте у вас есть меню навигации, и часто нам нужно использовать некоторые подменю. Лучший способ показать и скрыть объекты - это использовать jQuery, правильно? Ну, подумайте еще раз, когда вы проверите этот код:

<nav> <ul> <li> <a href='#item1'> Item 1 </a> <div> <ul> <li> <a href='#item11'> Item 1.1 </a> </ li> <li> <a href='#item12'> Item 1.2 </a> </ li> </ ul> </ div> </ li> <li> <a href='#item2'> Item 2 </a> <div> <ul> <li> <a href='#item21'> Item 2.1 </a> </ li> <li> <a href='#item22'> Item 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

И волшебство начинается здесь:

{/ * просто сделать ссылки немного лучше * / display: block; отступы: 4px; } nav {text-align: center; } / * любое меню (включая главное) * / nav ul {display: inline-block; стиль списка: нет; } nav> ul> li {/ * горизонтальные элементы (вертикаль тоже подойдет) * / float: left; } nav li div {/ * сворачивание любого подменю * / height: 0; переполнение: скрытое; / * Чувства Гудини * / переход: высота 1s; } nav li: hover> div {height: 56px; }

Подведение итогов

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

Итак, вы использовали это раньше? Можете ли вы придумать еще одно хорошее приложение для анимации CSS? Поделитесь своими мыслями, используя комментарии!

О Рочестер Оливейра

Я веб-дизайнер и предприниматель из Итажуба (МГ), Бразилия. Я люблю писать на непонятные темы и делать интересные вещи.

Подключение: