CSS переходы состояний transition, трансформации transform. Свойства translate, scale и rotate.
HTML-код
- Опубликовано: 26 июл 2024
- ✏️ В этом уроке говорим про трансформации и переходы, свойства transform, translate, scale, skew, transform-origin, transition и другие.
🔴 Timeline:
▶ 00:00 | План урока
▶ 00:15 | Свойство transform
▶ 00:32 | Свойство transform, значение translate (смещение)
▶ 01:38 | Свойство transform, значение scale (масштабирование)
▶ 03:09 | Свойство transform, значение rotate (поворот)
▶ 03:53 | Свойство transform, значение skew (искажение)
▶ 04:58 | Новые свойства функций трансформаций: translate, scale и rotate
▶ 05:49 | Свойство transform-origin
▶ 06:32 | Свойство transition
▶ 09:36 | Свойство transition-timing-function
▶ 10:32 | Генератор cubic-bezier для transition-timing-function
▶ 10:56 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
➖ Генератор cubic-bezier для transition-timing-function: tools.webdevpuneet.com/css-ea...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
Спасибо за познавательный урок!)
С трансформацией можно поиграться делая логотипы для сайта. Да и в целом в некоторых вещах пригодится.
Кот на заднем плане огонь, как и ты 😺
Хотелось бы обзорное видео про кота :) Или хотя бы просто его со всех сторон поглядеть. В конце какого-нибудь урока.
Комментарий для продвижения качественного образовательного контента, успехов.
Отзеркаливание - крутяк!
Хороший контент, заморочился)
Лайк!!! Пушка
Просто лучший:)
Не знал про новые отделтные свойства translate и другие.
Спасибо!)
Спасибо за ролик! Как всегда, все ёмко и понятно.
Коротко, но супер круто и понятно. Очень благодарна вам.
Спасибо за курс, все понятно и по делу. Лайк 👍
Пасиба Саня, все по теме и супер быстро
Коммент в поддержку
Спасибо за ролик, всегда что-нибудь новенькое для себя узнаю. Сегодня, например, про отражение :)
Не знаю, когда оно мне понадобится, но выглядит прикольно.
И вот интересно кстати реальные примеры применения этих штук узнать. Я правильно поняла, что обычная практика использовать транслейт для выдвигания мобильного меню?
Да, для мобильного меню как раз translate отлично подходит :)
Дополню ещё:
Если допустим делаем выезжающую боковую панель, то изначальные позиции предположим у нас top: 0; left: 0, то есть левый верхний угол. Чтобы спрятать его из видимости, мы прописываем transform: translateX(-100%) (но учитывайте ещё что у вас будут тени, так что нужно делать например -120%, в общем на глаз сами смотрите). При нажатии на кнопку нужно чтобы панель открылась(т.е отобразилась), прописываем transform: translateX(0). И вот проблема в том, что при первом открытии/обновлении страницы, видна анимация перехода в закрытое состоянии, то есть уходит в левую часть чтобы спрятаться. В таком случае я в первом состоянии(то есть когда он должен быть скрыт) указал visibility: hidden, а во втором состоянии, когда он открывается при клике, visibility: visible.(никакие другие свойства например display: none или свойство прозрачности opacity не подходят, это я так, на всякий случай говорю). Теперь у нас не будет анимации перехода из одного состояния в другое при открытии/обновлении страницы.
Спасибо, верные мысли!
Дополню дополнение :) Чтобы при загрузке страницы не было артефактов анимаций и переходов, чтобы страница не дергалась, есть ещё такой подход: через JS на событие DOMContentLoaded на body добавляется класс, допустим, is-dom-loaded, затем все привязки свойства transition к элементам делаем через этот класс.
.is-dom-loaded .button {
transition-duration: 0.2s;
}
Или в случае с «выезжающим» меню:
.overlay-menu:not(.is-active) {
translate: -100%;
}
.is-dom-loaded .overlay-menu {
transition-duration: 0.2s;
}
Все эти темы ещё подробно разберём на мастер-классах.
@@AleksanderLamkovспасибо, возьму на заметку)
Всё отлично, без воды, спасибо. Только хотел немного докопаться: вы говорите бейзер, а это Безье. Кривые Безье.
Привет! Спасибо за поправку, и правда, всегда выговаривал эту функцию неправильно, не замечал :)
Хотелось бы узнать, как правильно прописывать свойства анимаций(минимальное требуемое время анимаций и т.п) для полноценной плавной работы без тормозов? И правильно я понимаю, что для обьектов, которые будем анимировать, внутри них нельзя делать много обьектов, иначе анимации в любом случае начнут тормозить, независимо от того, какие настройки для трансформации мы пропишем?
Если мы говорим именно об анимациях, а не о переходах, то длительность анимации - всегда сугубо частный случай, зависящий от того что и как анимируем.
Для переходов же я выявил для себя оптимальное значение длительности в 0.2 секунды, не слишком медленное и не слишком быстрое.
Про «тормоза» вопрос ещё более сложный. Но количество элементов в анимириуемом объекте точно влияет на перформанс. Однако есть небольшой хак - свойство will-change, применяемое к анимируемому элементу, которое говорит браузеру о том, чтобы он уделил больше внимания конкретному элементу и его конкретному анимируемому свойству. Я хотел рассказать о will-change в рамках курса, но решил опустить эту тему, так как она новичкам не особо нужна.
Можно shorts про will-change 😂
@user-me5lo4ib7q отличная идея, спасибо!
Ролик как всегда отличный и информативный! Правильно ли я понял, что на практике когда мы воздействуем на одиночный элемент, то разумнее использовать translate , чтобы его передвинуть в нужном направлении? А когда воздействуем на несколько элементов, то лучше использовать "флексы" или "гряды"?
Привет! Спасибо за фидбек :)
Отвечая на вопрос - нет, не совсем, translate нужен лишь в анимациях и переходах, то есть, например, когда «оживляем» какую-то кнопку и при наведении хотим добавить эффект тряски по горизонтали, в таком случае как раз нужно свойство translate.
В грамотной верстке не должно возникать ситуаций, когда нужно что-то «подвинуть». Используя флексы и гриды с правильными параметрами браузер должен самостоятельно располагать элементы так, как это сделано дизайнером на макете.
С практикой эти вопросы сами по себе отпадут. Пока не заморачивайся сильно. Поверстаешь макет-другой и всё будет само собой получатся! :)
Насколько часто сейчас используют отдельный свойства translate, scale, rotate в реальной практике? Можно ли говорить о том, что их уже можно применять в любом проекте или лучше "обезопасить" себя и все же использовать transform?
Эти новые свойства имеют поддержку 92% браузеров, а это достаточно для того, чтобы применять их на реальных проектах.
Да и к тому же, зачастую на проектах используются препроцессор стилей, который можно настроить так, чтобы на выходе в обработанном css-файле эти свойства заменились на функции в старом добром transform. Так, к примеру, работает postcss плагин preset-env. То есть мы пишем в новом синтаксисе, а сборщик проекта обработает код так, чтобы он работал в бОльшем количестве браузеров, чем 92%.
Будут ли в ближайшем будущем видео про JS?
Привет! Будут через месяца два. Сразу после курса по CSS будет ряд мастер-классов по верстке и более углубленные темы.
@@AleksanderLamkov Уточните, пожалуйста, а сколько ещё уроков будет в рамках этого курса?
21 в курсе «для начинающих»
@@AleksanderLamkov Спасибо за ответ!