Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

Скрипты и советы | 23 мая 2024 523

Уроки CSS на Хабрахабре, habrahabr.ru, Веб-разработка, CSS, Google Chrome, web-разработка, sprites,

Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно. (базовое определение которое дает чатгпт)

Читать далее
[Перевод] Анимации CSS, основанные на времени

Демонстрация анимаций В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания...

Подробнее
[Перевод] Исследование производительности анимации на основе скрола страницы

Что нового в анимации на основе скрола? Анимация на основе скрола - это способ добавить интерактивности и визуального...

Подробнее
[Перевод] Анализ производительности CSS-анимаций

Что выбрать для анимирования элементов веб-страниц? JavaScript или CSS? Этот вопрос однажды вынужден будет задать себе...

Подробнее
[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие...

Подробнее
[Перевод] Переход к «Meta GSAP»: поиски «идеальной» бесконечной прокрутки

Уже послезавтра, 14 мая, стартует новый поток курса Python для веб-разработки, поэтому мы решили поделиться переводом о...

Подробнее
[Перевод] Что нового в Chrome 117?

Что ожидается в статье: Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения....

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями