CSS переходы, трансформации и анимации – карточка-перевертыш


Содержание материала:

CSS3 переходы, трансформации и анимации

В двух предыдущих главах мы рассмотрели некоторые новые свойства и возможности CSS3. Однако все, что мы до сих пор рассматривали, было статичным, а версия CSS3 способна на большее.

В настоящее время, если вам потребуется анимировать элементы на веб-странице, то вы, скорее всего, либо напишете собственный JavaScript-код, обеспечивающий выполнение требуемого действия, либо обратитесь к популярной JavaScript-библиотеке вроде jQuery, которой поручите всю тяжелую работу Однако разработчики, увлекающиеся CSS3, явно не согласны с засильем JavaScript в этой области и надеются, что ситуация вскоре изменится. Несмотря на то что версия CSS3 вряд ли узурпирует «власть» jQuery или чего-то в этом роде в ближайшее время, она идеально подходит для обеспечения плавных переходов (например, при наведении указателя мыши) и перемещения элементов по экрану Это отличная новость, поскольку она означает, что при увеличении количества замечательных современных браузеров, устанавливаемых на устройствах (например, на новейших смартфонах), мы можем использовать CSS для обеспечения анимаций вместо того, чтобы задействовать для этого JavaScript.

Вывод: вы, надо полагать, можете вычеркнуть пункт «научиться анимировать элементы с помощью jQuery» из своего списка текущих дел, поскольку уже знаете, что это можно сделать, используя только CSS. Как и всегда, CSS3-свойства не приведут к каким-либо отрицательным последствиям в устаревших браузерах. Такие браузеры будут просто пропускать непонятные им правила, как будто тех и нет вовсе.

В этой главе мы поговорим о следующем:

— что такое CSS3-переходы и как их можно использовать;

— как писать CSS3-переходы и их сокращенный синтаксис;

— как применять временные функции для контроля над плавностью выполнения CSS3-переходов (ease, cubic-bezier и др.);

— как устанавливать занятные переходы для адаптивных сайтов;

— что такое CSS3-трансформации и как мы можем их использовать;

— как добавлять разные 2D-трансформации (scale, rotate, skew, translate и др.);

— что такое 3D-трансформации и как их обеспечить;

— как добавить анимацию с помощью CSS3 (с использованием @keyframes).

CSS: Анимации, Трансформации и Переходы

Anonymous (1a6323)

Гость

Научитесь создавать необычные эффекты и анимации при помощи встроенных возможностей в CSS.

Чему вы научитесь:

  • Понимать принципы создания эффектов и анимаций при помощи встроенных возможностей в CSS;
  • Научитесь работать с CSS — Анимациями, Трансформациями и Переходами;
  • Создавать необычные эффекты и анимации при помощи CSS;
  • Комбинировать между собой эффекты и анимации;
  • Развивать креативное мышление;

Вы когда-нибудь видели на разных сайтах красивые эффекты или анимации? Возникал ли у Вас вопрос: «А как это сделано?» Хотите научиться разбираться в этом и создавать подобное, чтобы привлекать внимание к своему сайту, сделать его необычным, интересным и запоминающимся? Тогда этот курс специально для Вас.

Курс ориентирован на разработчиков, которые уже обладают базовыми знаниями HTML и CSS, при этом было бы интересно погрузиться в мир эффектов и анимаций, а также научиться их создавать при помощи CSS-Анимаций, Трансформаций и Переходов. В этом курсе мы разберемся в том, как устроены CSS — Анимации, CSS — Трансфомации (2D и 3D транфсормации) и CSS — Переходы, они же transitions, посмотрим на работу всех свойств, относящихся к ним и закрепим все это на специально подготовленных демках.

Для кого этот курс:

  • Разработчики, которые хотят погрузиться в мир Web-эффектов и анимаций.

СКАЧАТЬ КУРС:

Блок перевёртыш CSS

Оригинальный эффект, привлекающий к себе внимание посетителя, и совершенно не портящий внешний вид страницы — блок-перевёртыш.

Перевёртышем он становиться при наведении на него курсора мыши. Попробуйте, наведите курсор на мою фотографию.

Согласитесь, если посетитель проведёт курсором по такому элементу, и он вдруг оживёт, то это однозначно привлечёт его внимание.

В этот блог легко вставляются гиперссылки, фоновые изображения и всё, что можно вставить в html блок.

.otcrytka <
display : block ;
text-align : center ;
width : 150px ;
height : 150px ;
color : #fff ;
background-color : rgb(55,124,255) ;
font-size : 20px ;
line-height : 250px ;
background-image : url(images/sk1.jpg) ;
border-radius : 7px ;
box-shadow : inset 0 0 0 3px #705E5F ;
-webkit-transition : transform 3s ;
-ms-transition : transform 3s ;
transition : transform 3s ;

.otcrytka:hover <
-webkit-transform : rotateY(180deg) ;
-ms-transform : rotateY(180deg) ;
transform : rotateY(180deg) ;
>

div class =» perspective «> a href =» https://starper55plys.ru/ «>
span class =» otcrytka «>
Sergei Kutuzov
/span > /a >
/div >
/body >
/html >

Доводить этот код до своих целей, размеры там, картинки и т.п., лучше в Notepad++, а уж потом можно в файл functions.php вставить шорткод, и вставить в него Ваш доведённый код.

В зависимости от настроек темы, оформление перевёртыша ещё возможно придётся подправить, а возможно и нет.

Желаю творческих успехов.

История повторяется дважды. Один раз в виде трагедии. И второй раз — для тупых

CSS трансформации и анимация

Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии.

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

Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE — на -ms.

1. Введение в CSS трансформации

CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover);

В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:

div 1 Перемещён вправо -webkit-transform: translate(3em,0);
div 2 Повёрнут на 30 градусов по часовой стрелке -webkit-transform: rotate(30deg);
div 3 Смещён влево и вниз -webkit-transform: translate(-3em,1em);
div 4 Увеличен вдвое -webkit-transform: scale(2);

Без данных трансформаций div-ы будут выглядеть абсолютно одинаково.

2. Анимация

Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже:

Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS.

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

Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius.

4. Множественные трансформации на одном элементе

Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:

Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.

4. Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.

Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!

Топ-пост этого месяца:  Метод String toUpperCase JavaScript и TypeScript возврат значения строки в верхнем регистре

Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами.

5. Использование различных видов анимации

В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени.

При событии :hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.

Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.

Также обратите внимание, что изменение цвета происходит до поворота.

Фишка в том, что вы можете разбить -webkit-transition на несколько записей:

6. Событие одного элемента преобразует другой

Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и

Вот и соответствующий пример:

В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2.

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

В то же время, мы можем анимировать и первый блок:

Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.

Спасибо Niall за предложенный урок!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.the-art-of-web.com/css/css-animation/#.UWUdVJMvmSr
Перевел: Станислав Протасевич
Урок создан: 10 Апреля 2013
Просмотров: 125014
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Переходы и анимация

Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash. Теперь их мечта сбылась.

С помощью переходов CSS3 у вас есть потенциал менять внешний вид и поведение элемента всякий раз, когда происходит изменение его состояния, к примеру, когда на элемент наводится курсор, он получает фокус, становится активным или к элементу происходит переход по ссылке.

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

Переходы

Как уже упоминалось, чтобы переход имел место, элемент должен получить изменение состояния и для каждого состояния должны быть определены разные стили. Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами :hover , :focus , :active и :target .

Есть четыре свойства, связанных с переходами в целом, это transition-property , transition-duration , transition-timing-function и transition-delay . Не все они обязательны для создания перехода, наиболее популярны первые три.

В приведённом ниже примере блок изменит цвет фона в течение одной секунды в линейном виде.

Демонстрация transition

Вендорные префиксы

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

transition-property

Свойство transition-property определяет, какие именно свойства будут меняться в сочетании с другими свойствами перехода. По умолчанию, изменяться будут все свойства в различных состояниях. Тем не менее, только свойства заданные в значении transition-property будут затронуты в любых переходах.

В приведённом выше примере, свойство background определено в значении transition-property . Здесь background — единственное свойство, которое будет изменяться в течение 1 секунды в линейном виде. Любые другие свойства, включённые когда изменяется состояние элемента, но не добавленные в значение transition-property , не получат поведение перехода, как это установлено в свойствах transition-duration или transition-timing-function .

Если требуется добавить несколько свойств в переход, они могут быть разделены запятой внутри значения transition-property . Кроме того, может быть использовано ключевое слово all для перехода всех свойств элемента.

Демонстрация transition-property

Свойства в переходах

Важно отметить, что не для всех свойств может быть выполнен переход, а только для свойств, которые имеют различимую точку на полпути. Цвета, размеры шрифтов и тому подобное могут переходить от одного значения к другому, поскольку у них есть распознаваемые значения в промежутке друг с другом. У свойства display , например, не может быть перехода, поскольку оно не имеет никакой средней точки. Набор наиболее популярных свойств, к которым применим переход следующий.

  • background-color
  • background-position
  • border-color
  • border-width
  • border-spacing
  • bottom
  • clip
  • color
  • crop
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

transition-duration

Длительность перехода задаётся с помощью свойства transition-duration . В качестве значения этого свойства можно использовать основные значения времени, в том числе секунды (s) и миллисекунды (ms). Эти значения времени можно также задавать и дробными — .2s, например.

При переходе нескольких свойств можно задать несколько длительностей, по одному на каждое свойство. Как и в случае значения свойства transition-property , несколько длительностей могут быть объявлены с помощью значений, разделённых запятыми. Важен порядок этих значений при определении отдельных свойств и длительностей. К примеру, первое свойство, заданное в transition-property , будет совпадать с первым значением в свойстве transition-duration и так далее.

Если на несколько свойств в переходе приходится только одно значение длительности, то оно будет задавать длительность для всех свойств перехода.

Демонстрация transition-duration

Функция перехода

Свойство transition-timing-function используется для задания скорости, с которой будет двигаться переход. Зная длительность из свойства transition-duration у перехода может быть несколько скоростей в пределах одной длительности. Некоторые наиболее популярные значения ключевых слов для свойства transition-timing-function включают linear , ease-in , ease-out и ease-in-out .

Значение linear определяет переход, движущийся в постоянной скоростью из одного состояния к другому. Значение ease-in определяет переход, который начинается медленно и ускоряется на протяжении перехода, в то время как значение ease-out определяет переход, который начинает быстро и замедляется в течение всего перехода. Значение ease-in-out определяет переход, который начинается медленно, ускоряется в середине, а затем снова замедляется перед окончанием.

За каждой функцией времени стоит кубическая кривая Безье, которую можно указать конкретно с помощью значения cubic-bezier(x1, y1, x2, y2) . Дополнительные значения включают step-start , step-stop и значение steps ( , ).

При переходе нескольких свойств, вы можете определить и несколько функций времени. Эти значения, подобно другим значениям свойств перехода, могут быть объявлены через запятую.

Демонстрация функции перехода

transition-delay

Кроме объявления свойства перехода, длительности и функции времени, вы можете также установить задержку через свойство transition-delay . Задержка задаёт значение времени, в секундах или миллисекундах, которое определяет, сколько времени переход должен ожидать перед выполнением. Как и со всеми другими свойствами перехода, чтобы задержать многочисленные переходы, каждая задержка может быть перечислена через запятую.

Демонстрация transition-delay

Сокращённое свойство transition

Написание каждого свойства перехода по отдельности может напрягать, особенно с префиксами. К счастью, есть сокращённое свойство transition , способное поддерживать все эти разные свойства и значения. Используя одиночное значение transition , вы можете установить каждое значение перехода в следующем порядке: transition-property , transition-duration , transition-timing-function и, наконец, transition-delay . Не используйте запятые с этими значениями, если не желаете определить несколько переходов.

Чтобы задать несколько переходов сразу, установите каждую отдельную группу значений перехода, а затем используйте запятую, чтобы отделить каждую дополнительную группу значений.

Перемещения и трансформации в CSS3

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Топ-пост этого месяца:  Как работает в Laravel редирект на именованные маршруты и на действия контроллера

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

  • object: Установление главных правил нашего объекта.
  • van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
  • move-right: Используя этот класс, мы будем двигать наш объект.



CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

  • linear: перемещение происходит постоянной скоростью от начала и до конца.
  • ease: перемещение начинается медленно и затем набирает скорость.
  • ease-in: перемещение начинается медленно.
  • ease-out: перемещение заканчивается медленно.
  • ease-in-out: перемещение начинается и заканчивается медленно.
  • cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

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

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 532276c77be7906f • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Udemy — CSS – Анимации, Трансформации и Переходы (2020)

Вы используете устаревший браузер. Этот и другие сайты могут отображаться в нём некорректно.
Необходимо обновить браузер или попробовать использовать другой.

ЭТО ОБЪЯВЛЕНИЕ ДЛЯ НОВЫХ ПОЛЬЗОВАТЕЛЕЙ. У КОГО ЕСТЬ ДОСТУП, НЕ ВИДЯТ ЭТОГО ОБЪЯВЛЕНИЯ.

Если вы видите такое сообщение в темах, то у вас просто не оплачен доступ на форум!

У Вас нет прав для просмотра этой страницы или для выполнения этого действия.

Flip (переворот) эффект на чистом CSS.

В этой статье речь пойдет о так называемом flip -эффекте, это когда при наведении на объект он переворачивается и показывается его задняя сторона.

С выходом в свет CSS3 появился целый океан удивительных возможностей для реализации красочных эффектов на сайте без использования js -скриптов.

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

Проще всего будет рассмотреть создание на примере. Заготовим разметку:

В разметке у нас есть два блока для flip -эффекта: один — для горизонтального переворота, второй — для вертикального. Остается добавить необходимые стили, для каждого из них свои:

Как вы можете увидеть сам процесс поворота реализуется через строки 28-35 для горизонтального и 93-100 для вертикального. До этого производиться лишь подготовка стилей. Если планируете использовать этот код у себя, учтите, что удаление некоторой строки может привести к некорректной работе эффекта.

Блока переднего( front ) и заднего( back ) вида задается позиционирование абсолютное, чтобы они находились как бы в одном месте в родительском блоке.

Всё довольно просто и банально, стоит только немного вглядеться в год и разобраться какое свойство за что отвечает. Ссылка на демонстрацию была в начале статьи.

Метод вполне кроссбраузерный, проверялся в последних версия Opera , Mozilla Firefox , Chrome , Safari . Единственный прокол — IE последних версий, не получилось привести выполнение эффекта переворота( flip ) к нужному виду.

Так же способ не является адаптивным, ведь когда пользователь заходит с телефона или планшета за места курсора у него пальцы рук и как заставить правильно реагировать на нажатие пальцем непонятно.

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

Исходники примера с кодом flip -эффекта вы можете скачать ниже:

CSS3: анимация против переходов

В CSS3 есть две техники визуализации, которые соревнуются за ваше внимание: анимация (Animations) и переходы (Transitions) (примечание: в статье будут использованы русские варианты названий этих техник). В этой статье мы попробуем выявить сходства и различия этих техник, чтобы вы понимали, когда лучше использовать тот или иной способ.

Для правильного понимания смысла данной статьи, очень желательно, чтобы вы уже имели опыт в работе с анимацией и переходами.

Топ-пост этого месяца:  Sass Script аргументы миксинов ключевого слова, переменные

Сходства

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

  • определять CSS-свойства, которые мы хотим изменять;
  • устанавливать вид математической функции для управления скоростью перехода от одного значения к другому;
  • указывать продолжительность перехода или анимации;
  • перехватывать события анимации и переходов и делать с ними все, что угодно;
  • визуализировать изменения CSS-свойств.

На этом сходства заканчиваются и начинаются…

Различия

Различия между анимацией и переходами проявляются, когда вы начинаете их запускать. Различия также состоят в том, насколько легко/сложно запрограммировать переход/анимацию и тем, как легко всем этим управлять через JavaScript . Давайте исследуем эти различия более подробно.

Запуск

Одним из основных различий между переходами и анимацией является то, как они вызываются.

Переход запускается, когда изменяется какое-либо CSS-свойство. Наиболее часто встречается использование псевдокласса :hover для изменения значения свойства CSS:

В приведенном выше примере используется переход, а результатом будет расширение круга на определенную величину при наведении на него курсора мыши. Другим способом запуска перехода является использование JavaScript, чтобы программным путем добавлять или удалять CSS-классы, симулируя изменение значений свойств CSS. И, наконец, можно с помощью JavaScript задать inline-стиль меняющий CSS-свойство, которое « слушает » ваш переход.

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

С помощью имеющегося свойства, анимацию можно перевести в статус паузы ( pause ), что означает, что она будет неактивна до тех пор, пока свойство не будет переведено в статус запущено ( running ). Консорциум W3C решил удалить это свойство, поэтому сейчас его уже не существует.

Зацикливание

Это очень просто. Анимация может быть легко зациклена с помощью установки свойства animation-iteration-count. Вы можете задать любое фиксированное число для повтора анимации, которое пожелаете:

Если вы хотите, чтобы ваша анимация повторялась бесконечно, то установите следующее значение:

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

Определение промежуточных точек / ключевых кадров (keyframes)

С помощью анимации вы можете определить ключевые кадры, которые дадут вам больше контроля над значениями CSS-свойств, нежели просто начальная и конечная точка:

Вы можете задать любое количество ключевых кадров. В процессе воспроизведения анимации, каждый кадр будет изменять нужным образом значения свойств. Это позволяет вам реализовывать разнообразные виды анимации, которые позволяют HTML5 соревноваться наравне с такими анимационными технологиями, как Flash, и даже быть эффективнее.

При использовании переходов у вас нет достаточного контроля над конечным результатом:

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

Явное определение анимируемых свойств

Следующая вещь, о которой я хочу рассказать, это явное определение анимации и переходов применительно к значениям CSS-свойств.

С формальной точки зрения, если у вас есть переход, то каждое CSS-свойство, которое вы хотите с помощью него анимировать, должно быть явно определено.

Например, у вас есть следующий переход:

В коде выше, указаны различные значения свойств background-color и width . Однако, явно определен переход только для свойства background-color. Это значит, что браузер будет анимировать только изменение свойства background-color.

Если же необходимо, чтобы анимированы были оба свойства — и background-color , и width — следует это явно определить:

Что насчет параметра «all» при определении перехода?

В действительности, нет необходимости определять каждое анимируемое свойство при объявлении перехода. Вы можете облегчить себе жизнь, если будете использовать значение « all » вместо описания конкретных свойств, например: transition: all .5s ease-in . Однако так поступать не рекомендуется, потому что такой подход наносит ущерб производительности.

В этом случае браузер наблюдает за всеми свойствами, которые могут быть анимированы, вместо того, чтобы следить за явно указанными. Если у вас нет необходимости в использовании параметра « all », то рекомендуется указывать все анимируемые свойства по отдельности.

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

В примере выше, свойства height и background-color будут плавно изменяться в соответствии с определенными ключевыми кадрами, даже если какое-то свойство до этого не было объявлено!

Взаимодействие с JavaScript

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

Этот сценарий лучше всего работает, когда вы точно знаете, какого результата хотите достичь. Однако, может случиться так, что вам потребуется изменять значения, используемые для анимации, согласно какому-то внешнему источнику — к примеру клику мыши, результату внешнего вычисления и тому подобное.

Для такого взаимодействия не подходят величины, заранее определенные в CSS. Можно положиться на использование JavaScript, но полностью реализовывать анимацию на нем, задача достаточно сложная. Наиболее оптимальным решением в данной ситуации будет использование гибридного подхода. Это означает, что анимация или переход объявляются средствами CSS, но некоторые аспекты динамически изменяются посредством JavaScript.

Когда дело доходит до взаимодействия JavaScript и анимации/переходов, то вы почти всегда будете использовать именно переходы. При связке анимация-JavaScript… практически невозможно заставить анимацию нормально работать.

Анимация очень специфична для создания связки с JavaScript. Команда @keyframes четко определяет последовательность анимации, которая запускается сразу после загрузки страницы. Попытка изменить заданную анимацию через JavaScript потребует выполнения очень сложной последовательности шагов, включая модификацию самого стилевого правила @keyframes. Если вы когда-нибудь пытались изменять CSS-свойства внутри стилевого правила, то вы, скорее всего, представляете сложность данной процедуры.

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

Это изменение может быть выполнено через JavaScript: вы можете изменить CSS-свойство, которое « слушает » ваш переход, обратившись к inline-стилю :

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

Чтобы лучше понять, о чем идет речь, посмотрите вот этот простой пример :

Кликните в любой точке серой формы и круг переместится в эту точку.

Этот пример работает достаточно просто. Перемещение круга обрабатывается с помощью CSS-перехода. Однако, координаты точки, в которую надо переместить круг, передаются через JavaScript. Так как переход « слушает » координаты, то любое их изменение ведет к запуску этого перехода. Конечный результат работы именно такой, каким он и был задуман.

Самое примечательное, что не требуется писать JavaScript-код для реализации самого перехода. И, наконец, так как поддержка переходов встроена в стандарт CSS и, соответственно, в браузер, анимация происходит очень плавно.

Эта дружба между переходами и JavaScript очень сильна, поэтому вам стоит использовать это преимущество на полную катушку.

Заключение

Теперь вы имеете достаточное представление о сходствах и различиях переходов и анимации в CSS. Вот обобщение касательно того, в каких случаях какой способ лучше применять:

  • Если требуется гибкость, обеспечиваемая, ключевыми кадрами и простотой зацикливания, то предпочтительно использовать анимацию;
  • Если нужна простая анимация из начальной точки в конечную, то следует использовать переходы;
  • Если необходимо манипулировать значением свойств в соответствии с внешними воздействиями или вычислениями, то идеально использование связки переход + JavaScript.

Конечно, имя терпение и хорошее знание JavaScript, можно нейтрализовать различия между переходами и анимацией.

Рекомендации, приведенные в данной статье, основываются на типичных случаях использования переходов и анимации. Огромные усилия, направленные на то, чтобы изменить поведение этих двух способов анимации, почетны, но не оправданы. Поэтому проще использовать все по своему назначению.

Данная публикация представляет собой перевод статьи « CSS3: Animations vs. Transitions » , подготовленной дружной командой проекта Интернет-технологии.ру

Добавить комментарий