#статья дня
Помните, я разгонял про аккордеоны? Вот тут вот: https://yangx.top/htmlshit/591
Итогом было то, что анимировать высоту не так-то просто, нужно или анимировать max-height, или заранее всё считать.
Но тут оказалось, что Firefox умеет анимировать высоту в гриде! Вы только посмотрите: https://codepen.io/chriscoyier/pen/qBXoEMV
Через анимацию grid-template-rows!!
Давайте-ка поднажмём в issue Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=759665
Может, добавят.
#grid #accordion #animate
Помните, я разгонял про аккордеоны? Вот тут вот: https://yangx.top/htmlshit/591
Итогом было то, что анимировать высоту не так-то просто, нужно или анимировать max-height, или заранее всё считать.
Но тут оказалось, что Firefox умеет анимировать высоту в гриде! Вы только посмотрите: https://codepen.io/chriscoyier/pen/qBXoEMV
Через анимацию grid-template-rows!!
Давайте-ка поднажмём в issue Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=759665
Может, добавят.
#grid #accordion #animate
Telegram
Будни разработчика
#заметка дня
Во времена расцвета jQuery реализация аккордеона — набора раскрывающихся блоков — укладывалась в метод slideToggle. Одна-две строчки – и готово.
Сейчас же jQuery не в почёте, а CSS Transitions не дают нам возможности анимировать высоту от 0…
Во времена расцвета jQuery реализация аккордеона — набора раскрывающихся блоков — укладывалась в метод slideToggle. Одна-две строчки – и готово.
Сейчас же jQuery не в почёте, а CSS Transitions не дают нам возможности анимировать высоту от 0…
#видео дня
Если на кого и стоит подписаться в этом вашем ютубе (ну, помимо Виталия Киренкова, конечно 😜 ) — это ребята из команды Keyframers.
Последнее время они редко выкладывают стримы, но и того, что есть — очень даже хватает.
Кому красиво налипающих бумажек? Их есть: https://www.youtube.com/watch?v=Fdq95qVG7F4
Или техника FLIP, позволяющая достичь высокой производительности анимаций: https://www.youtube.com/watch?v=aDmmj4a_7iI
Ещё, пожалуй, стоит Юрия Артюха упомянуть. Но он по WebGL: https://www.youtube.com/user/flintyara
#youtube #css #animate #webgl
Если на кого и стоит подписаться в этом вашем ютубе (ну, помимо Виталия Киренкова, конечно 😜 ) — это ребята из команды Keyframers.
Последнее время они редко выкладывают стримы, но и того, что есть — очень даже хватает.
Кому красиво налипающих бумажек? Их есть: https://www.youtube.com/watch?v=Fdq95qVG7F4
Или техника FLIP, позволяющая достичь высокой производительности анимаций: https://www.youtube.com/watch?v=aDmmj4a_7iI
Ещё, пожалуй, стоит Юрия Артюха упомянуть. Но он по WebGL: https://www.youtube.com/user/flintyara
#youtube #css #animate #webgl
YouTube
➰📃 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0
David Khourshid and Stephen Shaw recreate a beautiful 3D isometric flying paper animation using CSS only!
* ⏰ Streamed live on September 16, 2019 at https://twitch.tv/keyframers
* 💡 Inspiration: https://dribbble.com/shots/7127901-Dialog/attachments/131339…
* ⏰ Streamed live on September 16, 2019 at https://twitch.tv/keyframers
* 💡 Inspiration: https://dribbble.com/shots/7127901-Dialog/attachments/131339…
👍3
#статья дня
Введение в SVG-анимации для верстальщиков
На моей памяти Хабрахабр умирал уже раза три.
Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.
На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/
Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.
В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).
#svg #css #animate
Введение в SVG-анимации для верстальщиков
На моей памяти Хабрахабр умирал уже раза три.
Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.
На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/
Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.
В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).
#svg #css #animate
👍6
#статья дня
Введение в SVG-анимации для верстальщиков
На моей памяти Хабрахабр умирал уже раза три.
Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.
На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/
Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.
В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).
#svg #css #animate
Введение в SVG-анимации для верстальщиков
На моей памяти Хабрахабр умирал уже раза три.
Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.
На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/
Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.
В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).
#svg #css #animate
👍16
#новость дня
Итак, всем знакомая проблема: назначили два вида transform-преобразований, например, translate и rotate и пошли делать анимацию на ключевых кадрах.
А в анимации указали только translate. И бум — никакого вам поворота. Вот так.
А все дело в том, что в CSS до недавнего времени не существовало понятия композиции анимаций и преобразований. А теперь есть! Так и называется: animation-composition. И значения add, replace и accumulate.
Подробнее и примеры в блоге разработчиков Chrome. Вот кодпен с демо: https://codepen.io/web-dot-dev/pen/VwGRBVX
Я больше вам скажу, вчера вышел Firefox 115, который начал поддерживать композицию из коробки! Так что можно сказать — пора.
#animate #transform #composition
Итак, всем знакомая проблема: назначили два вида transform-преобразований, например, translate и rotate и пошли делать анимацию на ключевых кадрах.
А в анимации указали только translate. И бум — никакого вам поворота. Вот так.
А все дело в том, что в CSS до недавнего времени не существовало понятия композиции анимаций и преобразований. А теперь есть! Так и называется: animation-composition. И значения add, replace и accumulate.
Подробнее и примеры в блоге разработчиков Chrome. Вот кодпен с демо: https://codepen.io/web-dot-dev/pen/VwGRBVX
Я больше вам скажу, вчера вышел Firefox 115, который начал поддерживать композицию из коробки! Так что можно сказать — пора.
#animate #transform #composition
👍16🔥2🎉2👏1
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
К посту про
Демо: https://codepen.io/argyleink/pen/BaXyJRL
Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).
Кстати, там же можно увидеть применение селектора
Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.
Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.
Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size
#css #animate #height
К посту про
interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.Демо: https://codepen.io/argyleink/pen/BaXyJRL
Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).
Кстати, там же можно увидеть применение селектора
:user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.
Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.
Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size
#css #animate #height
👍16❤4