Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.
HTML-код
- Опубликовано: 6 июн 2024
- CSS - переходы либо CSS - transitions могут применяться ко всем элементам и даже к псевдоэлементам. Используются для оживления нашей верстки. Что в свою очередь приводит к улучшению взаимодействия с пользователем, как правило путем приятной анимированной реакции на его действия. (подписаться) Например - наведение и нажатие на кнопку. Также свойства transition можно использовать для построения несложных сценариев анимации. Да и в целом, верстка где применены плавные переходы выглядит гораздо дороже. Фактически, CSS - переходы обеспечивают смену значений других свойств с определенной анимацей и сценарием. Всю эту магию можно описать универсальным CSS свойcтвом transition, либо рядом отдельных свойств.
🔴 Шпаргалка по CSS transitions, анимируемым свойствам и cubic-bezier:
fls.guru/csstransition.html
Содержание:
00:00 - Вступление
01:02 - TRANSITION-DURATION
03:49 - TRANSITION-PROPERTY
06:38 - TRANSITION-DELAY
08:24 - TRANSITION-TIMING-FUNCTION
12:40 - TRANSITION
13:13 - Практическая информация о применении переходов
14:42 - Шпаргалка
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Эти уроки такие крутые, что кажется, что их по ошибке бесплатно выложили и скоро уберут 🤣👍
Ахах) Спасибо!
Я согласна. Посмотрела несколько видео. Действительно кратко, все по делу.. очень нравится стиль изложения. И вообще идеи, которые автор хочет донести. Благодарю!
@@FreelancerLifeStyle 👍🏼
Нужно смотреть включив видео экрана.
Эти шпаргалки - это вообще кладезь знаний, не нужно гуглить и что-то додумывать) все уже есть под рукой. Круто!
Пожалуйста!
Женя сверстал сайты получше хмтл буков))
@@FreePhoenix888 больше так никогда не говори
Привет Жека смотрю тебя из Кыргызстана. Установи Live Preview в vscode появиться отдельное окно, где появится пример верстки. Залайкайте чтобы Жека увидел
Дружище, огромное спасибо за твой контент, мало того, что уже научился верстать по твоим видео, так еще и всегда можно подсмотреть то, что забыл!
Спасибо за вашу работу, Евгений! супер понятная информация!
Евгений, браво!!! Отлично подан материал!!! Приятно учиться. Спасибо огромное! 👍👍👍👍
Как обычно, все предельно ясно, кратко, наглядно !
Женя, твои уроки бесценны. Здоровья тебе и успехов :)
АййБомбааааа. Как всегда, красивее, доступнее и проще всех. Как похвалить - слов нет... Короче RESPECT !!!
Спасибо большое! 🤟
Давно хотел узнать про transition. Я не перестаю удивляться подаче материала. Спасибо, ты - лучший!
Уважаемый фрилансер по жизни! Большое спасибо за ваш труд! Учу основы CSS по вашим роликам.
Жека...просто огонь!! очень рад что на тебя вышел!!
Женя, это очень круто. Какое внимание ты уделяешь деталям своих видео!
Классное видео) радует глаз, объяснение просто огонь, коротко и емко)
Да Жека объясняет вообще все четко, а я дурак искал в гугле всякую инфу и других блогеров смотрел. А тут все хорошо объясняет и все понятною Спасибо за то что ты делаешь!
Пожалуйста!
Полезно, осмысленно, лаконично. Как всегда на высоте!
Спасибо большое! Стараюсь!
Боже, это настолько крутые ролики,что просто нет слов!!! Спасибо за ваш труд! Если бы не Вы, я бы бросила все это изучать через неделю 😆
Спасибо тебе, Жека, в прошлом - маг самоучка, ныне - Великий магистр! Твои крутейшие уроки магии помогают 💪!!!
Дождался🎉🎉🎉 Евгений ты ЛУЧШИЙ!!!! Как же мне не хватало этого😀 СПАСИИИИБОООО!!! Видос как всегда🔥🔥🔥🔥
Спасибо! Рад что нравится!
Огромное спасибо за уроки. Благодаря им CSS кажется не таким сложным. А шпаргалки это просто супер!!!
Красиво делаешь Евгений. Спасибо за всю проделанную тобой работу)
Я ещё никогда не видел, как хорошо человек может подойти к своему делу! Спасибо!
В это нелегкое для нас время, твои уроки дико вдохновляют на созидание. Дуже дякую!
Шпаргалки шедевр )) Автору респект. Даже тем кто хорошо разбирается в теме , они все равно помогают.
Женя, respect! А твои подсказки это вообще находка - одним файлом, четко и понятно.... Respect
Как всегда, огромнейшее тебе спасибо за твой труд!
так интересно рассказывает про анимацию, глаза горят) сама сижу и смотрю как захватывающий сериал, все стало ясно и так и чешутся руки творить магию )
Спасибо! Я рад что нравится)
Сама шпаргалка - это уже шедевр!!! Огромное спасибо за урок и шпаргалку!
Один из немногих, кто реально обучает а не делает пустое шоу
Спасибо!
Применил сейчас все к своему макету и глазу приятно сразу стало, спасибо!
Давай ещё больше анимаций и хитростей)
Крутяк! Конечно будет и уже есть в плейлисте ruclips.net/p/PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk
Шикарный урок, а шпаргалка вообще 🔥 👍🏻
ЛУЧШЕЕ ВИДЕО ПО АНИМАЦИИ В CSS,СПАСИБО!
как же ты заморачиваешься с монтажом. Красавчик!
Да, бывает) Спасибо!
Урок, шпаргалака, всё просто ТОП. Евгений, ты лучший!!!
Шпаргалочка по кубику шедевральна. Спасибо за видео, очень доступно и всё в понятно.
Я рад!
Спасибо, как всегда офигенная доступность знаний! :)
Спасибо большое! Как обычно понятно, доступно, грамотно подан материал. Жирный лайк Жека
PERFECT!!! Один из самых качественных контентов на RUclips. Благодарность автору и уважение!
Спасибо!
То что искал! Все самое основное) Спасибо большое!
Супер! Я рад!
Этот канал мои самые первые курсы по верстке, и я рад что я попал именно сюда.
Спасибо за такие ценные уроки!
Жду следующие ваги курсы..
Спасибо! Рад что полезно!
Как всегда,кратко,емко все по делу.Отличный урок!!!
Очень круто. Начинается прямо настоящее искусство. Спасибо, Женя.
Это точно))
Спасибо большое! 16 мин - и все стало понятно и по полочкам разложилось)
Не знаю как вы, ребята, а я лайкос ставлю еще до начала просмотра, ибо знаю - Жека плохого не расскажет)))
Спасибо!
@Николай Ларин чушь какая-то
Только одно могу сказать,ты легенда. Дай Бог тебе здоровья и всех благ🙏
смотрю это видео 26 декабря 2022 года, т.е ровно через три года после публикации этого ролика! Уроки кайф!! Не теряют своей актуальности!
ОЧЕНЬ ПОЛЕЗНЫЙ УРОК!!! СПАСИБО БОЛЬШОЕ, ЖЕКА!
Суперски! Понятно все просто и по делу, с примерами и шпоргалкой! Лучший из лучших!!!
Спасибо большое! 🤟
Видосы как всегда божественные
Привет, как всегда - потрясающе!!! Спасибо большое
Пожалуйста!
Годнота с утра подъехала. Пока мозги свежие. Респект ✊
Спасибо! Стараюсь)
Красавчик! Очень понятно объясняешь! Все видео смотрю
Жека, как всегда огромнейшее тебе спасибо!
Как всегда все понятно, да еще и обалденная шпаргалка. Спасибо!
Пожалуйста!
Классно видео разбито на части, вот бы все длинные ролики имели такую навигацию. Спасибо огромное, было полезно
Бесподобно! Спасибо большое за то что ты есть!
Спасибо ВАМ Огромное, за Ваш труд и время, очень помогли, буду за вами следить и рекомендовать друзьям!)
Спасибо! Рад что полезно!
Начало просто шедевр!!!💥
Я только что нашел ваш канал на RUclips, видео на вашем канале отличаются от видеоуроков размещенных на других каналах RUclips, вы круче чем другие кодеры, большое спасибо, я узнал то, чего не знал.
Лайк, спасибо дружище за классную подборку, буду использовать!
Просто здорово!!! Очень хороший урок!
Как всегда супер! Спасибо за урок.
Спасибо вам за такой труд!
Самые крутые уроки по верстке у Женька👍👍👍
крутые офигенные позитивные видео , спасибо !
за шпаргалки ОГРОМНЫЙ ОГРОМНЫЙ РЕСПЕКТ!
Годно, крайне годно, шедеврально, богоподобно!)
Спасибо, как всегда все грамотно и без воды.
Круто, классные у тебя видосы!
Пять баллов!!!
Спасибо! Стараюсь)
ДА НУ, КАКИЕ ПЯТЬ БАЛЛОВ ИЗ СТА??!! ТЫСЯЧА БАЛЛОВ ИЗ СТА!
Как всегда супер урок. Отдельное спасибо за шпаргалку
Пожалуйста!
Очень нужный для меня материал! Благодарю!
как же круто ты объясняешь, спасибо большое!!!🤗
Кратко и содержательно, как всегда. Лайк!!
Спасибо! 👍
Женя (мне кажется, что мы уже так сроднились, что я уже на ты, можно?) спасибо тебе! Ты очень помогаешь людям и это добро тебе все вернется в 100-кратном размере, вот увидишь! Скоро все наладится и будет чистое небо. Обнимаю, береги себя!
Жека, ти дуже крутий вчитель! Так тримати! 👏👏👏
Как же все таки профессионально объясняет. Шпаргалка очень полезна и всегда при мне.
Очень все четко, ясно и по существу.
Я рад что полезно!
@@FreelancerLifeStyle , занимался бэком на Ruby и для полноты картины решил освоить фрон. Так приятно узнать, что в ютубе есть хороший материал по верстке. Буду использовать ваш канал и приложенные шпаргалки как практическое руководство.
Благодарю за проделанную работу!
Огромное вам спасибо! Все очень ясно, по полочкам!
Клёво , спасибо за качественный контент
Пожалуйста!
Отличный урок, спасибо за труд!
Спасибо за качественные уроки!
Класс! Спасибо, Женя!
Спасибо за полезный урок и очень нужную шпаргалку)
Пожалуйста! 😊
Спасибо тебе, Женька. Классный ты пацан.
Спасибо!
Супер. Спасибо !!! Самые лучшие курсы!!!
Очень понравился урок! Красава, Евгений!
Пожалуйста!
Спасибо за урок и шпаргалку!
Круто! Я даже подумываю может у вас начать учится!)👍👍👍 Хорошо объясняете! 👍👍👍
Спасибо! Очень доступно и понятно, и ооочень интересно :)
Пожалуйста!
Спасибо! Да бог здоровья Вам.
Очень хорошо рассказываешь! Спасибо огромное!
Круто, здорово, магия!
Спасибо за твою работу !
Спасибо, все четко и по полкам!
это ШЕДЕВР!!!
Как всегда всё супер чётко. Спасибо
Спасибо!
Спасибо, отличное видео.
Отличная и очень полезная инфа! Спасибо!
Супер! Я рад!
Лайк. Буду ждать видос про анимацию бекграунда )
Спасибо!
Дякую Женя за твої старання, вони безцінні!
крутяк,спасибо Жека )
чувак, ты мне оочень помогаешь, спасибо!