Создавать CSS анимации стало очень просто! + новый формат

Рет қаралды 12,222

Күн бұрын

Создавать анимации всегда было очень сложной задачей, но это в прошлом! С этими новыми devtools в Google Chrome стало намного легче создавать любого типа анимации. Всем рекомендую!
Демо анимаций из видео - sin9k.github.io/modal-animati...
Исходники демо - github.com/Sin9k/modal-animat...
Поддержать Айти Синяка можно здесь:
KZfaq: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
01:07 Зачем дебажить анимацию?
04:20 Знакомимся с вкладкой animations
11:17 Дебажим более сложный пример
13:20 Дебажим зацикленную анимацию
19:40 Изменения функции анимации в realtime
21:03 Подытожим
21:53 Неудачные дубли
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер: 123

@ITKAMASUTRA 8 ай бұрын

Утренний анимационный ликбез. Круто. Смотрю 👏

@it-sin9k 8 ай бұрын

Какие гости) надеюсь найдешь для себя, что то полезное!)

@ITKAMASUTRA 8 ай бұрын

@@it-sin9k мои познания в анимации закончились вместе с jQuery))

@big_red_beard 8 ай бұрын

Круто! Хотелось бы такие видосы о всех функциях девтулз. 👍👍👍👍

@dima__rx5fw3rm1n 8 ай бұрын

По поводу формата - на мой взгляд, формат хороший. Главное то, что я подписан не только на айти синяк. Но и на классного инженера, который умеет говорить про интересные штуки. Формат просто другой. Но тут он воспринимается хорошо. Я вижу вас на камере и это словно беседа, вы что-то объясняете, а я попиваю утренний кофе, вникая в суть темы)

@it-sin9k 8 ай бұрын

Спасибо за развернутый фидбек))

@vladfolk2418 7 ай бұрын

Огонь, формат зашёл, контента любого и побольше)

@DubinArtur 8 ай бұрын

Давай Синяка. Ты - крутой чувак, но говорящих голов много, а Синяк хороший узнаваемый персонаж

@it-sin9k 8 ай бұрын

Синяк однозначно вернется уже в след видосе)

@AbraKadabra000 8 ай бұрын

Вау круто! Приятно слушать и видеть

@gritsienkooleg3447 8 ай бұрын

Ох, видеть человека вживую всегда приятнее) но если что, альтерэго тоже пойдёт 😅

@shrekpar 8 ай бұрын

Формат классный, продолжайте в том же духе! :)

@andreiribac6284 8 ай бұрын

Видео полезное как всегда. Это можно сказать константа! По поводу нового формата - анимационный персонаж это круто, но мне больше нравится живое человеческое лицо! ПРОШУ И ДАЛЬШЕ ЗАПИСЫВАТЬ ВИДЕО В ТАКОМ ФОРМАТЕ!

@it-sin9k 8 ай бұрын

Будем время от времени делать такой формат) и мб голосовалку замучу в телеграм канале по тому, что людям больше нравится) проблема в том, что длина видео сильно увеличивается)

@andreiribac6284 8 ай бұрын

@@it-sin9k а по временным затратам и в целом какой формат легче записывается?

@it-sin9k 8 ай бұрын

если речь о наших затратах, то такой формат записывать быстрее. Но опять же тут не было наших фирменных визуализаций, тут видео идеально подходит под такой формат. Но если нужно визуализировать как виртуальное дерево работает, то надо еще потренироваться, как это правильно записывать. И так же видео менее адаптированно под мобильных пользователей, а их у нас много

@andreiribac6284 8 ай бұрын

@@it-sin9k Живому человеку доверяешь больше, плюс видны эмоции это тоже огромный плюс.

@user-vk4si1oz7w 8 ай бұрын

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

@user-zu6hg3un6d 8 ай бұрын

Круто, спасибо большое) Буду знать)

@arman-6172 8 ай бұрын

Спасибо! Отличный материал и подача!

@HEX_CAT 8 ай бұрын

Классный формат. Спасибо за полезное видео❤❤❤

@sykalovandrey6090 8 ай бұрын

Я не хочу испортить тебе настроение потому что это первое видео в таком формате ,наверное просто первый блин комом)) Так держать🙂

@it-sin9k 8 ай бұрын

Спасибо за сдержанный комментарий) я тоже оцениваю качество видоса на прям низком уровне))

@brightisrael1304 8 ай бұрын

Спасибо. хороший формат, то что нужно для разнообразия

@muratx10 8 ай бұрын

Спасибо за контент!!!! Как всегда топчик! Единственно, примеры я бы предложил сделать на темном фоне, больно смотреть на полном экране, особенно вечером ))

@it-sin9k 8 ай бұрын

Спасибо! Учту на будущее)

@dimitrikarpov535 8 ай бұрын

Замечательный формат, все так же полно и информативно. Синяк может не спешить из отпуска.

@codertoper4218 8 ай бұрын

Очень круто!

@NoName-zh7cc 8 ай бұрын

супер видос, большое спасибо

@user-fh4ss8ce1n 8 ай бұрын

шикарный ролик, это действительно очень круто и очень удобно :) спасибо :)

@alenache1 8 ай бұрын

огонь 🔥🔥🔥

@sugdyzhekov 8 ай бұрын

Спасибо! Нравится :)

@user-ex9ju3sz2x 8 ай бұрын

Спасибо:)

@yuriyzveryanskiy5963 8 ай бұрын

Когда человек талантлив, он делает одиннаково круто в любом формате, главное не останавливайся)))

@user-pv5is5pz4j 8 ай бұрын

спасибо за видео)

@Delirium4Dude 8 ай бұрын

контент - топчик ! ) Спасибо

@user-px5no4vy9e 8 ай бұрын

Пушка-гонка!

@RomanBakirov 8 ай бұрын

Ахах. Гугл присмативает за мной и предлагает как раз то что необходимо было) Автору от души)

@xD-hu3gw 8 ай бұрын

Отлично 🤗

@armensargsyan8981 8 ай бұрын

топ, спасибо!

@onlytryhard80 8 ай бұрын

Формат супер, продолжай

@iharrwe 8 ай бұрын

Спасибо. Лично мне такой формат нравится намного больше)

@it-sin9k 8 ай бұрын

у него проблема, в том, что видео резко увеличиваются в длине в раза 2-3)

@videoaudio7669 8 ай бұрын

Любопытное видео. Посмотрел с интересом

@user-non-user 8 ай бұрын

Твои видео невозможно остановиться смотреть Спасибо ❤

@it-sin9k 8 ай бұрын

Спасибо!

@zi0wiz 5 ай бұрын

шикарно спасибо

@Albert-jo 8 ай бұрын

огонь!

@Shli4ara 8 ай бұрын

спасибо

@user-by3gw2qh6g 8 ай бұрын

Александр вы крут) контент очень интересный. ❤

@boldureans 8 ай бұрын

Привет! Спасибо за видео!

@it-sin9k 8 ай бұрын

Спасибо, что смотрите!) это всегда заряжает)

@johnbrown3914 8 ай бұрын

Формат супер, делай как нравится

@sergeykahnwald6640 8 ай бұрын

Формат отличный, круто

@1654045 8 ай бұрын

Супер, нравиццо! :)

@KlinovAS 8 ай бұрын

Блин... Это ж так удобно. Я тепер на несколько уровней стану више. У меня много анимаций, но не таких интересных как после работы с дебагером как с крутым редактором. Спасибо. Не понимаю как я мог такое проспать. ХаХа.. А я сразу понял что к чему не досмотрев видео)) Круто сделали

@it-sin9k 8 ай бұрын

Я испытывал такие же эмоции после того как открыл для себя дебаггер)

@Ramosok 8 ай бұрын

Праздник в дом приходит) когда у Синяка новое видео выходит)))

@it-sin9k 8 ай бұрын

праздника вкус всегда настоящий)))

@user-xb5cu7ur5y 8 ай бұрын

Очень классное видео! А самое главное очень полезное! Не знал что можно дебажить анимацию! Блин очень круто!

@it-sin9k 8 ай бұрын

Я сам как узнал, знатно приболдел))

@Mr.Bellamy 8 ай бұрын

Прикольно, какого то мужика озвучивает айти синяк

@it-sin9k 8 ай бұрын

я видео пересматриваю) какие то круги под глазами) видимо я и есть настоящий синяк)

@The14Some1 8 ай бұрын

Конечно, созерцать твой носатый фейс в 100 раз приятнее, чем аморфное голубое нечто :)

@it-sin9k 8 ай бұрын

да) нос у меня отборный) по грузинским полям мне кажется собирали)))

@snatvb 8 ай бұрын

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

@it-sin9k 8 ай бұрын

Спасибо!) это я еще себя успакаивал, чтобы поменьше руками махать))

@snatvb 8 ай бұрын

@@it-sin9k не, это дает живости и какого-то экшена в кадре, так что все в этом плане наоборот круто)

@fergussawyer 8 ай бұрын

Годнота🎉

@ivanmorozov6197 7 ай бұрын

это топ! Спасибо! Мб в будущем сделаете видео как пользоваться вкладкой performance?

@it-sin9k 7 ай бұрын

Спасибо! А какую пользу хотите получить от вкладки perfomance?

@kri4evskiy 8 ай бұрын

Спасибо, формат норм! Главное - контент! А он всегда на вsсоте

@it-sin9k 8 ай бұрын

спасибо!) мнение спонсоров всегда золото))

@artem_grean 8 ай бұрын

Формат супер. Нужно ещё) Было бы прикольно себя в кругляхе показывать)

@it-sin9k 8 ай бұрын

у нас есть ТГ канал (t.me/it_sin9k). Были уже кругляши там) планируются еще)

@davidboltuev9788 8 ай бұрын

Если контента будет больше, то круто и можно без старого оформления видео)

@user-tn1sj9zn9q 8 ай бұрын

Нужно обязательно засинячить видос с анимацией на ccs

@user-nh8um2dn9s 8 ай бұрын

Слежу за каналом, считаю его интересным и полезным

@it-sin9k 8 ай бұрын

Спасибо!) мы очень стараемся)

@Isten 8 ай бұрын

Отпуск дело хорошее, тоже ухожу скоро 😅

@dima__rx5fw3rm1n 8 ай бұрын

Получается, со statefull анимацией вкладка не работает? К примеру, состояние хранится в usestate. Тогда, мы можем дежажить ui баги в приложении, если добавим анимацию? По аналогии с console. Там вндь есть свойство animation или около того, где фреймами можно управлять. Эта тулза как-бы записывает историю анимаций. Значит, посмотреть, что там в джс происходит, не получится?

@it-sin9k 8 ай бұрын

Да, посмотреть JS код не получится и даже html классы если динамически вы навешивали для анимации с помощью например CSSTransition во вкладке Elements не отобразятся

@17u5h 8 ай бұрын

мне привычней "синяк", но и новый формат с лицом тоже хорошо. Можно чередовать. А можно вообще сдлеать альтер эго, как например сделал Доктор Дью (он же Евгений Матвеев)

@Fumariee 8 ай бұрын

Начало 4:20

@ibrokhimdevdes196 8 ай бұрын

новый формат +

@it-sin9k 8 ай бұрын

спасибо!) это был мелкий челенж для меня)

@behramjabbarov55 8 ай бұрын

Видео полезное интересное, по сравнению с Синяком думаю там планирование и конкретики больше. Тут больше свободы как бы обычный разговор.

@it-sin9k 8 ай бұрын

Хорошо описали разницу) я так же чувствую) формат сразу вырос по длине раза в 2)

@egorovsa 8 ай бұрын

Гдеж ты раньше был.. =))

@amelianceskymusic 8 ай бұрын

Посмотри что-то на тему "монтаж по движению", в большегстве случаев не нужно анимировать елементы прямо от 0 до 100, попробуй, например масштаб первой анимации сделать из 50 и поиграться со скоростью появления

@amelianceskymusic 8 ай бұрын

Могу порекомендовать подобное видео про монтаж по движению на канале "Вольница"

@it-sin9k 8 ай бұрын

Спасибо большое) буду знакомиться)

@user-zl5sp9yh1n Ай бұрын

Незнаю зачем мне это, но с пасибо с бэка!!!)))

@it-sin9k Ай бұрын

Добро пожаловать))

@apyrkh 8 ай бұрын

Автор так жестикулировал, что отсутствие синяка не заметно 😅😉

@derus1559 8 ай бұрын

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

@it-sin9k 8 ай бұрын

так на прямоугольник в любом случае нажимаешь, чтобы перейти на анимацию. Это не особо работало в моем случае :(

@TracktorSpark 8 ай бұрын

Формат классный, только что с качеством видео?..

@it-sin9k 8 ай бұрын

Это я зафакапился) я снял в низком качестве и пришлось еще обрезать)) поэтому беда пичаль)

@Vildan_main 8 ай бұрын

Совмести и то и то😊 Например рассказывай как человек, а не как персонаж😂(надеюсь ты поймёшь), делай выплывающие вставки с документации или с примерами кода Или совмести в одном ролике и себя и анимированного персонажа, намного сложнее, но все же это идея😊

@it-sin9k 8 ай бұрын

Мне жена тоже все говорит, мол научись более свободно записываться, а то речь ненастоящая) я пробовал разные варианты записи, но блин пока не получается))) она мне даже подарила курсы по постановке речи) я сходил) стал быстрее записываться и легче, но эту проблему так и решил) нет ни тени таланта по работе с голосом)

@twelve4244 8 ай бұрын

Спасибо за контент)Ну с форматом без разницы Только название с алкоголем ассоциируется в начале даже как-то не хотел заходить на канал Но контент топовые оч нравится

@it-sin9k 8 ай бұрын

Спасибо большое) будем стараться больше контента и меньше алкоголя делать)

@user-ds4ik5zu9n 8 ай бұрын

Больше воды. Синяк как-то все быстро и четко рассказывал. Но в целом норм.

@max_cr_it 5 ай бұрын

А js анимацию так можно дебажить? 😁

@it-sin9k 5 ай бұрын

а в чем заключается js анимация?

@user-ku2hc3mr3m 8 ай бұрын

720p?

@it-sin9k 8 ай бұрын

это короче я запорол) Дима при монтаже фейспалмил, то что я назаписывал))

@user-gd7fm2fp1u 5 ай бұрын

жаль качества в 1080 нет

@it-sin9k 5 ай бұрын

да, это мой косяк. Человек который монтировал все это сильно меня ругал. Каюсь)

@user-vj7ec1ms4d 8 ай бұрын

Спасибо! 4 год работаю во фронте и в анимациях дуб дубом...

@it-sin9k 8 ай бұрын

ахахах) такое часто бывает)

@n0sfer 8 ай бұрын

Я смотрю канал исключительно ради информации. Так что мне плевать на формат. Главное - голос Александра :)

@it-sin9k 8 ай бұрын

Спасибо!) Александр активно работает над следующим выпуском)

@onsey2377 4 ай бұрын

как поставить больше 1 лайка ? :D

@it-sin9k 4 ай бұрын

можно под все видео поставить)))

@sno-oze 8 ай бұрын

формат отличный, а вот тема про анимации.. ну такое.

@adamburke4496 8 ай бұрын

Без кринжовой анимации даже лучше. Осталось только эту кринжовую манеру повествования исправить 😅

@it-sin9k 8 ай бұрын

Без кринжа никуда)))

@SashaKuzikov 8 ай бұрын

*Просто пипец сколько воды и бесполезной информации по посторонним темам.* Так и не досмотрел. Жалко убивать время на всякий мусор.

@it-sin9k 8 ай бұрын

грубовато конечно, но мысль понял

@grgvgrgv 7 ай бұрын

Это просто дичь, невозможно смотреть на эту клоунаду

@PowWowVideo 8 ай бұрын

Нормально! Спасибо за видео и формат :)