Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.

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
🤟 Живи, а работай в свободное время! ©

[@Shygrief]

Эти уроки такие крутые, что кажется, что их по ошибке бесплатно выложили и скоро уберут 🤣👍

[@FreelancerLifeStyle]

Ахах) Спасибо!

[@baikovamaria5725]

Я согласна. Посмотрела несколько видео. Действительно кратко, все по делу.. очень нравится стиль изложения. И вообще идеи, которые автор хочет донести. Благодарю!

[@baikovamaria5725]

@@FreelancerLifeStyle 👍🏼

[@nurmuhammadnematov9661]

Нужно смотреть включив видео экрана.

[@user-sayuo]

Привет Жека смотрю тебя из Кыргызстана. Установи Live Preview в vscode появиться отдельное окно, где появится пример верстки. Залайкайте чтобы Жека увидел

[@irynaloushkina2284]

Эти шпаргалки - это вообще кладезь знаний, не нужно гуглить и что-то додумывать) все уже есть под рукой. Круто!

[@FreelancerLifeStyle]

Пожалуйста!

[@FreePhoenix888]

Женя сверстал сайты получше хмтл буков))

[@umnikumnikov1338]

@@FreePhoenix888 больше так никогда не говори

[@youngson4881]

смотрю это видео 26 декабря 2022 года, т.е ровно через три года после публикации этого ролика! Уроки кайф!! Не теряют своей актуальности!

[@user-xr7pl9hg7g]

АййБомбааааа. Как всегда, красивее, доступнее и проще всех. Как похвалить - слов нет... Короче RESPECT !!!

[@FreelancerLifeStyle]

Спасибо большое! 🤟

[@jackjones7144]

Да Жека объясняет вообще все четко, а я дурак искал в гугле всякую инфу и других блогеров смотрел. А тут все хорошо объясняет и все понятною Спасибо за то что ты делаешь!

[@FreelancerLifeStyle]

Пожалуйста!

[@andreypolkeyev6595]

Один из немногих, кто реально обучает а не делает пустое шоу

[@FreelancerLifeStyle]

Спасибо!

[@alekskotov9660]

Спасибо тебе, Жека, в прошлом - маг самоучка, ныне - Великий магистр! Твои крутейшие уроки магии помогают 💪!!!

[@allamoisieieva1532]

так интересно рассказывает про анимацию, глаза горят) сама сижу и смотрю как захватывающий сериал, все стало ясно и так и чешутся руки творить магию )

[@FreelancerLifeStyle]

Спасибо! Я рад что нравится)

[@uh_no_0]

Спасибо за вашу работу, Евгений! супер понятная информация!

[@user-xk5nd6pv2g]

за шпаргалки ОГРОМНЫЙ ОГРОМНЫЙ РЕСПЕКТ!

[@user-kk7zn5iu5u]

Евгений, браво!!! Отлично подан материал!!! Приятно учиться. Спасибо огромное! 👍👍👍👍

[@user-se9tz2bv2v]

Огромное спасибо за уроки. Благодаря им CSS кажется не таким сложным. А шпаргалки это просто супер!!!

[@user-yi9gy4cz7n]

Давно хотел узнать про transition. Я не перестаю удивляться подаче материала. Спасибо, ты - лучший!

[@user-im8ej6sl8y]

Как обычно, все предельно ясно, кратко, наглядно ! Женя, твои уроки бесценны. Здоровья тебе и успехов :)

[@user-qj6rx9zz2l]

Шпаргалочка по кубику шедевральна. Спасибо за видео, очень доступно и всё в понятно.

[@FreelancerLifeStyle]

Я рад!

[@o_antushevich]

Женя, это очень круто. Какое внимание ты уделяешь деталям своих видео!

[@kotiko_oks]

Уважаемый фрилансер по жизни! Большое спасибо за ваш труд! Учу основы CSS по вашим роликам.

[@daisuke731]

Дружище, огромное спасибо за твой контент, мало того, что уже научился верстать по твоим видео, так еще и всегда можно подсмотреть то, что забыл!

[@niceman5890]

Я ещё никогда не видел, как хорошо человек может подойти к своему делу! Спасибо!

[@cryptoneophyte]

В это нелегкое для нас время, твои уроки дико вдохновляют на созидание. Дуже дякую!

[@konstantino7016]

Сама шпаргалка - это уже шедевр!!! Огромное спасибо за урок и шпаргалку!

[@user-sc3mq2yi2z]

Женя, respect! А твои подсказки это вообще находка - одним файлом, четко и понятно.... Respect

[@anastasiiasymvolokova1246]

Классное видео) радует глаз, объяснение просто огонь, коротко и емко)

[@user-gg8os2mh6o]

Боже, это настолько крутые ролики,что просто нет слов!!! Спасибо за ваш труд! Если бы не Вы, я бы бросила все это изучать через неделю 😆

[@FAMILY-nl2mg]

Жека...просто огонь!! очень рад что на тебя вышел!!

[@purposeful8157]

Шпаргалки шедевр )) Автору респект. Даже тем кто хорошо разбирается в теме , они все равно помогают.

[@3abrak]

Красиво делаешь Евгений. Спасибо за всю проделанную тобой работу)

[@user-tr8xi3ik3c]

Как же все таки профессионально объясняет. Шпаргалка очень полезна и всегда при мне. Очень все четко, ясно и по существу.

[@FreelancerLifeStyle]

Я рад что полезно!

[@user-tr8xi3ik3c]

@@FreelancerLifeStyle , занимался бэком на Ruby и для полноты картины решил освоить фрон. Так приятно узнать, что в ютубе есть хороший материал по верстке. Буду использовать ваш канал и приложенные шпаргалки как практическое руководство. Благодарю за проделанную работу!

[@TtTalkUA]

как же ты заморачиваешься с монтажом. Красавчик!

[@FreelancerLifeStyle]

Да, бывает) Спасибо!

[@Hypnogajable]

Полезно, осмысленно, лаконично. Как всегда на высоте!

[@FreelancerLifeStyle]

Спасибо большое! Стараюсь!

[@justasparrow7296]

Не знаю как вы, ребята, а я лайкос ставлю еще до начала просмотра, ибо знаю - Жека плохого не расскажет)))

[@FreelancerLifeStyle]

Спасибо!

[@user-fs3yr9yk6n]

@Николай Ларин чушь какая-то

[@brodyagaPATY]

Дождался🎉🎉🎉 Евгений ты ЛУЧШИЙ!!!! Как же мне не хватало этого😀 СПАСИИИИБОООО!!! Видос как всегда🔥🔥🔥🔥

[@FreelancerLifeStyle]

Спасибо! Рад что нравится!

[@abduazimkh]

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

[@myrzabekbazarkulov103]

Этот канал мои самые первые курсы по верстке, и я рад что я попал именно сюда. Спасибо за такие ценные уроки! Жду следующие ваги курсы..

[@FreelancerLifeStyle]

Спасибо! Рад что полезно!

[@user-su1vo4wg2t]

Шикарный урок, а шпаргалка вообще 🔥 👍🏻

[@user-mx4nw1gh1m]

ЛУЧШЕЕ ВИДЕО ПО АНИМАЦИИ В CSS,СПАСИБО!

[@Anatoli-bq1pe]

Как всегда, огромнейшее тебе спасибо за твой труд!

[@user-tu6ok5ts2f]

Очень круто. Начинается прямо настоящее искусство. Спасибо, Женя.

[@FreelancerLifeStyle]

Это точно))

[@nikolay7618]

Как всегда,кратко,емко все по делу.Отличный урок!!!

[@user-lu6zb8jl2z]

Урок, шпаргалака, всё просто ТОП. Евгений, ты лучший!!!

[@elnurgamidov1169]

Только одно могу сказать,ты легенда. Дай Бог тебе здоровья и всех благ🙏

[@user-gs5sf8ou9r]

Женя (мне кажется, что мы уже так сроднились, что я уже на ты, можно?) спасибо тебе! Ты очень помогаешь людям и это добро тебе все вернется в 100-кратном размере, вот увидишь! Скоро все наладится и будет чистое небо. Обнимаю, береги себя!

[@vermar2222]

Спасибо большое! 16 мин - и все стало понятно и по полочкам разложилось)

[@k1rill73]

Красавчик! Очень понятно объясняешь! Все видео смотрю

[@user-ii9fz3be1r]

Спасибо большое! Как обычно понятно, доступно, грамотно подан материал. Жирный лайк Жека

[@user-gk1wd7hf6g]

Видосы как всегда божественные

[@user-nb8ex1tq6r]

Спасибо, как всегда офигенная доступность знаний! :)

[@aleksgbr3878]

Суперски! Понятно все просто и по делу, с примерами и шпоргалкой! Лучший из лучших!!!

[@FreelancerLifeStyle]

Спасибо большое! 🤟

[@itsmylife5333]

PERFECT!!! Один из самых качественных контентов на KZbin. Благодарность автору и уважение!

[@FreelancerLifeStyle]

Спасибо!

[@sichouli1914]

ОЧЕНЬ ПОЛЕЗНЫЙ УРОК!!! СПАСИБО БОЛЬШОЕ, ЖЕКА!

[@niklebed4413]

Как всегда все понятно, да еще и обалденная шпаргалка. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@xu2593]

крутые офигенные позитивные видео , спасибо !

[@anton8258]

То что искал! Все самое основное) Спасибо большое!

[@FreelancerLifeStyle]

Супер! Я рад!

[@johnconnor9787]

Самые крутые уроки по верстке у Женька👍👍👍

[@marinaermilova7912]

Привет, как всегда - потрясающе!!! Спасибо большое

[@FreelancerLifeStyle]

Пожалуйста!

[@mikhailbykov6311]

Просто здорово!!! Очень хороший урок!

[@iamname8758]

Применил сейчас все к своему макету и глазу приятно сразу стало, спасибо! Давай ещё больше анимаций и хитростей)

[@FreelancerLifeStyle]

Крутяк! Конечно будет и уже есть в плейлисте kzbin.info/aero/PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk

[@song-he8mx]

как же круто ты объясняешь, спасибо большое!!!🤗

[@ZaranP]

Спасибо вам за такой труд!

[@skywalker2090]

Классно видео разбито на части, вот бы все длинные ролики имели такую навигацию. Спасибо огромное, было полезно

[@user-ru8zk4ws5r]

Очень нужный для меня материал! Благодарю!

[@user-oi6yw5jd5y1]

Начало просто шедевр!!!💥

[@FER-gq2nn]

Как всегда супер! Спасибо за урок.

[@danilafipsk]

Лайк, спасибо дружище за классную подборку, буду использовать!

[@leonmakedon9317]

Спасибо ВАМ Огромное, за Ваш труд и время, очень помогли, буду за вами следить и рекомендовать друзьям!)

[@FreelancerLifeStyle]

Спасибо! Рад что полезно!

[@lyalyalyalya591]

Как всегда супер урок. Отдельное спасибо за шпаргалку

[@FreelancerLifeStyle]

Пожалуйста!

[@dimalukashenko4865]

Отличный урок, спасибо за труд!

[@user-wo8wd9kr1b]

Годнота с утра подъехала. Пока мозги свежие. Респект ✊

[@FreelancerLifeStyle]

Спасибо! Стараюсь)

[@pulse_of_cataclysm]

Круто, классные у тебя видосы! Пять баллов!!!

[@FreelancerLifeStyle]

Спасибо! Стараюсь)

[@sashuk_keshuk9292]

ДА НУ, КАКИЕ ПЯТЬ БАЛЛОВ ИЗ СТА??!! ТЫСЯЧА БАЛЛОВ ИЗ СТА!

[@jasonborn4373]

Бесподобно! Спасибо большое за то что ты есть!

[@alexandrisakov4735]

Спасибо, как всегда все грамотно и без воды.

[@no_name_2mix]

Спасибо за полезный урок и очень нужную шпаргалку)

[@FreelancerLifeStyle]

Пожалуйста! 😊

[@hibiride]

Очень хорошо рассказываешь! Спасибо огромное!

[@bohdandudchenko939]

Жека, как всегда огромнейшее тебе спасибо!

[@yuriismakota9574]

Спасибо за качественные уроки!

[@jasonborn4373]

Годно, крайне годно, шедеврально, богоподобно!)

[@user-sl8is7sk3j]

Огромное вам спасибо! Все очень ясно, по полочкам!

[@DzmitryArtsiamkou]

Супер. Спасибо !!! Самые лучшие курсы!!!

[@user-nf8dw6sz2s]

Очень понравился урок! Красава, Евгений!

[@FreelancerLifeStyle]

Пожалуйста!

[@oleksandrilchuck8482]

Спасибо за урок и шпаргалку!

[@user-gu4uj8jp8y]

Спасибо! Да бог здоровья Вам.

[@romanpomin1967]

С такими видео и документации не нужно. Класс!

[@FreelancerLifeStyle]

Спасибо!

[@user-yz1lf2pw5v]

Кратко и содержательно, как всегда. Лайк!!

[@FreelancerLifeStyle]

Спасибо! 👍

[@placeyournickname]

Спасибо! Очень доступно и понятно, и ооочень интересно :)

[@FreelancerLifeStyle]

Пожалуйста!

[@user-eu2vx4wv5p]

Круто! Я даже подумываю может у вас начать учится!)👍👍👍 Хорошо объясняете! 👍👍👍

[@asdfauiuhasduhfpaiuduy2]

Спасибо тебе, Женька. Классный ты пацан.

[@FreelancerLifeStyle]

Спасибо!

[@adeptusCustodius]

Класс! Спасибо, Женя!

[@viktorriabiy]

Ще сонце не зійшло, а я вже дивлюся відео)))

[@user-qj7yx3nt7d]

Клёво , спасибо за качественный контент

[@FreelancerLifeStyle]

Пожалуйста!

[@user-fo4wy9iw6j]

это ШЕДЕВР!!!

[@user-bw8eh1dm9t]

Отличная и очень полезная инфа! Спасибо!

[@FreelancerLifeStyle]

Супер! Я рад!

[@MegaTesei]

Круто, здорово, магия!

[@user-qg3vj6nd1r]

Спасибо за твою работу !

[@darka415]

Круто! спасибо за информацию! шпаргалки - это просто чудо! ну а подача, тайминг под видео -огонь! а что установлено в редакторе, чтоб были видны оступы полосой?

[@Katyachaya13]

Как всегда всё супер чётко. Спасибо

[@FreelancerLifeStyle]

Спасибо!

[@andyrey840]

Лайк. Буду ждать видос про анимацию бекграунда )

[@FreelancerLifeStyle]

Спасибо!

[@pravnik84]

Все как всегда супер))

[@FreelancerLifeStyle]

Спасибо!

[@Konotopskaya]

Жека, ти дуже крутий вчитель! Так тримати! 👏👏👏

[@user-uj8cf2rz2p]

Спасибо, все четко и по полкам!