Download "Модуль 5. Вебинар №10. Переходы и анимация"

00:00 Начало 00:50 cubic-bezier - функция для описания времени перехода 05:19 Единицы измерения vw и vh 06:34 В каких случаях применять :hover и :focus на элементы 07:27 Свойства позиционирования и анимируемые свойства 08:07 Вы никогда не хотите анимировать ничего кроме opasity и transform 11:22 2D vs 3D трансформации 13:04 Анимация делается в обе стороны: из исходного в измененное состояние и обратно 15:41 Делаем переход на кнопку, изменяем цвет. 17:57 Что такое переход, как его получить, свойства перехода 22:35 Задержка перед переходом - свойство transition-delay 23:46 Свойства перехода нужно указыват в базовом классе 25:20 Если необходимо сделать переход на несколько свойств 27:42 Делаем сложную анимацию - выезжающие иконки 32:17 Добавляем иконку которая будет ставать на место выезжающей 37:45 Прячем выезжающие иконки за пределами кнопки 40:40 Оптимизируем общие стили после оформления анимации 44:24 Ресурс для 3D анимации 45:14 Делаем пункт меню с подчеркиванием. Бордер плохо анимируется - будем импользовать псевдоэлемент 49:12 Делаем эффект ховер - анимируем с помощью opacity 50:58 Анимировать ширину - плохая идея, но у абсолютно-позиционированного элемента анимировать width можно 53:32 Анимируем scale. Блок всегда масштабируется из его центра 57:42 Свойство transform-origin точка начала трансформации 1:01:53 Делаем оверлей выезжающий на картинку 1:05:47 Анимируем переход на оверлее 1:07:00 overflof: hidden; полностью игнорирует события 1:08:19 Анимация оверлей единственный способ для выезжающей заставки с текстом 1:10:31 Делаем чтобы иконки тоже заезжали слева 1:12:20 Если нужно анимровать много контента, вы хотите его сгруппировать 1:14:39 overflof: hidden; нужно давать на контейнер для оверлея 1:17:02 Делаем сценарий для анимации, чтобы выезжал оверлей, а потом появлялись иконки 1:20:41 Анимируем оверлей с помощью scale 1:23:23 Рассматриваем библиотеку для анимации 1:26:14 В разработке библиотеки используют каждый день 1:35:11 Анимируем модалку 1:37:05 Чтобы применить несколько трансформов, их значения комбинируются записывая через пробел 1:43:18 Что если в спрятанном состоянии окно модалки имеет scale: 1,1; или scale: 0,9; 1:49:11 transform: rotate - не дает эффекта 3D 1:50:56 Добавляем перспективу. Что такое перспектива - свойство perspective 1:53:49 Как оформить перспективу для группы, перспектива в действии 1:57:03 Свойство perspective-origin 1:58:21 Поворачиваем карточку на 180 градусов вокруг оси. Какая возникает проблема 2:00:09 Нужно ховерить по боксу, а не по сцене, чтобы элемент переворачивался 2:00:50 Card-flip - как сделать, чтобы работало без JS 2:03:46 Делаем чтобы картинка вращаясь по-спирали залетала в центр