Все о 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 больше так никогда не говори

[@andreypolkeyev6595]

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

[@FreelancerLifeStyle]

Спасибо!

[@youngson4881]

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

[@allamoisieieva1532]

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

[@FreelancerLifeStyle]

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

[@jackjones7144]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@user-xr7pl9hg7g]

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

[@FreelancerLifeStyle]

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

[@abduazimkh]

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

[@user-qj6rx9zz2l]

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

[@FreelancerLifeStyle]

Я рад!

[@user-kk7zn5iu5u]

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

[@user-tr8xi3ik3c]

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

[@FreelancerLifeStyle]

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

[@user-tr8xi3ik3c]

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

[@user-xk5nd6pv2g]

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

[@alekskotov9660]

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

[@uh_no_0]

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

[@user-gs5sf8ou9r]

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

[@user-im8ej6sl8y]

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

[@daisuke731]

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

[@justasparrow7296]

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

[@FreelancerLifeStyle]

Спасибо!

[@user-fs3yr9yk6n]

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

[@kotiko_oks]

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

[@user-yi9gy4cz7n]

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

[@user-se9tz2bv2v]

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

[@myrzabekbazarkulov103]

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

[@FreelancerLifeStyle]

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

[@TtTalkUA]

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

[@FreelancerLifeStyle]

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

[@user-gg8os2mh6o]

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

[@cryptoneophyte]

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

[@user-sc3mq2yi2z]

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

[@anastasiiasymvolokova1246]

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

[@Hypnogajable]

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

[@FreelancerLifeStyle]

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

[@o_antushevich]

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

[@niceman5890]

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

[@purposeful8157]

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

[@3abrak]

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

[@brodyagaPATY]

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

[@FreelancerLifeStyle]

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

[@konstantino7016]

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

[@Anatoli-bq1pe]

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

[@FAMILY-nl2mg]

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

[@user-mx4nw1gh1m]

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

[@iamname8758]

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

[@FreelancerLifeStyle]

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

[@leonmakedon9317]

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

[@FreelancerLifeStyle]

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

[@aleksgbr3878]

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

[@FreelancerLifeStyle]

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

[@user-ii9fz3be1r]

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

[@anton8258]

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

[@FreelancerLifeStyle]

Супер! Я рад!

[@vermar2222]

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

[@k1rill73]

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

[@user-tu6ok5ts2f]

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

[@FreelancerLifeStyle]

Это точно))

[@user-su1vo4wg2t]

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

[@nikolay7618]

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

[@user-nb8ex1tq6r]

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

[@ZaranP]

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

[@skywalker2090]

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

[@song-he8mx]

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

[@sichouli1914]

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

[@elnurgamidov1169]

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

[@itsmylife5333]

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

[@FreelancerLifeStyle]

Спасибо!

[@niklebed4413]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@xu2593]

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

[@user-lu6zb8jl2z]

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

[@user-ru8zk4ws5r]

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

[@pulse_of_cataclysm]

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

[@FreelancerLifeStyle]

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

[@sashuk_keshuk9292]

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

[@danilafipsk]

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

[@user-gk1wd7hf6g]

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

[@alexandrisakov4735]

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

[@romanpomin1967]

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

[@FreelancerLifeStyle]

Спасибо!

[@marinaermilova7912]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@no_name_2mix]

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

[@FreelancerLifeStyle]

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

[@user-sl8is7sk3j]

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

[@lyalyalyalya591]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@jasonborn4373]

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

[@placeyournickname]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@mikhailbykov6311]

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

[@FER-gq2nn]

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

[@user-wo8wd9kr1b]

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

[@FreelancerLifeStyle]

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

[@dimalukashenko4865]

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

[@hibiride]

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

[@user-gu4uj8jp8y]

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

[@yuriismakota9574]

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

[@asdfauiuhasduhfpaiuduy2]

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

[@FreelancerLifeStyle]

Спасибо!

[@user-oi6yw5jd5y1]

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

[@johnconnor9787]

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

[@user-qj7yx3nt7d]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@bohdandudchenko939]

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

[@oleksandrilchuck8482]

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

[@user-nf8dw6sz2s]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@DzmitryArtsiamkou]

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

[@adeptusCustodius]

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

[@user-qg3vj6nd1r]

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

[@user-bw8eh1dm9t]

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

[@FreelancerLifeStyle]

Супер! Я рад!

[@user-yz1lf2pw5v]

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

[@FreelancerLifeStyle]

Спасибо! 👍

[@user-uj8cf2rz2p]

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

[@jasonborn4373]

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

[@evgeniyzabolotskih4530]

Приветствую Жека! Был небольшой перерыв в этом курсе ... но не потому что бездельничал, а ввязался в свой первый коммерческий проект, ахаха. Прошло полтора месяца со старта с моими нулевыми знаниями, полной неуверенностью в своих силах, 17 уроков этого курса и вот я уже сдал проджекту свою первую верстку за баблишко. Почти без косяков :) но он знатно удивился ... говорит - "не видел ещё в своей практике, чтобы верстальщик сдал задание с минимальным количеством правок" (и то это меня gap в safari подвел, будь он неладен). А я ему - "а видел, чтобы этому верстальщику полтора месяца от "рождения" было?" 😄 А он - "ооо, у тебя большое будущее))))". Кстати пока верстал, освоил нимножко JS =)) и урок про "спойлер" пригодился и про Swiper и раскопал таймер обратного отсчёта в гугле - тоже подключил на изи ... и вообще, программирование это про практику - намного увереннее стал себя чувствовать. И начинает где-то в подкорке откладываться, каким образом сочетаются между собой свойства. Где, что и когда нужно втыкать. Это сложно объяснить ... где-то на уровне инстинктов =) 20% - теории, 80% - практики, "не лохматить бабушку" 🙃и будет всё 🤌Самое приятное в этой истории - с этого урока начинается самый сок, который будет выпиваться гораздо увереннее 🤤 Не могу отойти от шока уже второй день =) Безумно благодарен тебе. В обойму на патреоне встал истесно =) Здоровья и счастья тебе, твоей семье и всем твоим знакомым ❤ Кто-то молится на боженек, а я молюсь на таких людей как ты, в своей жизни )))

[@bombilovka16gd17]

Привет, я искренне рад, что у вас все получилось, и надеюсь, что все идет по плану и вы не унываете))) Еще один момент, можем ли мы как нибудь связаться?) Меня просто распирает от того, что я ни с кем не могу поделиться своими впечатлениями о верстке. Единственное место, где я могу найти братьев по учебе - это конечно же Ютуб и та среда, где процветает фронтенд-разработка. Сражу скажу немного о себе - я человек не дотошный, студент первого курса =), который хочет найти братьев по разуму. Как вы смотрите на такую идею?)

[@evgeniyzabolotskih4530]

@@bombilovka16gd17 Приветствую. Ютуб удаляет мой комментарий -_- поэтому коротко: Всё ок, по плану, добрался до DOM в JS. Не унываю. Разве что немного выгораю, но это поправимо. На работу в компании пока не берут 😃 В инфе о канале есть ссылки на гитхаб + телега

[@bombilovka16gd17]

@@evgeniyzabolotskih4530, супер)

[@colodatwin3102]

Привет, очень интересно как сейчас у вас успехи?))

[@evgeniyzabolotskih4530]

@@colodatwin3102 приветствую. Хотел подробно описать. Но ютуб чистит комментарии ... Всё хорошо, изучаю дальше, делаю заказы на фрилансе. Не могу закончить этот плейлист, потому что нет времени на нормальные конспекты. И так хватает опыта в бою))

[@Katyachaya13]

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

[@FreelancerLifeStyle]

Спасибо!

[@viktorriabiy]

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

[@MegaTesei]

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

[@gorbulevsv]

Спасибо, отличное видео.

[@happyhomo4423]

чувак, ты мне оочень помогаешь, спасибо!

[@user-fo4wy9iw6j]

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

[@dariayasnitskaya50]

Супер! Спасибо!

[@vasto1]

очень помогло, спасибо!)