Лучшие вопросы
Таймлайн
Чат
Перспективы
CSS-анимации
Из Википедии, свободной энциклопедии
Remove ads
CSS-анимации — это технология веб-разработки, позволяющая создавать плавные переходы и изменения визуальных элементов на веб-страницах с помощью HTML разметки и каскадных таблиц стилей CSS . Они используются для улучшения пользовательского интерфейса, добавления интерактивности и создания эффектов без необходимости в JavaScript или других скриптах. Анимации основаны на ключевых кадрах и свойствах, которые определяют, как элемент изменяется со временем.
Remove ads
История
CSS-анимации были введены в спецификации CSS3, разработанной Консорциумом Всемирной паутины (W3C). Первая версия модуля CSS Animations появилась в 2009 году. Поддержка браузерами началась с WebKit (Safari) в 2010 году, а затем распространилась на другие браузеры, такие как Firefox и Chrome. Полная поддержка была достигнута к 2015 году с выходом CSS Animations Level 1.
Основные принципы
Анимации в CSS работают через два ключевых компонента:
- @keyframes: Правило, определяющее последовательность кадров анимации. Оно задаёт начальное и конечное состояния, а также промежуточные точки.
- Свойства анимации: Такие как
animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-countиanimation-direction, которые контролируют поведение анимации.
Типы анимаций
- Переходы (Transitions): Простые изменения между двумя состояниями, например, при наведении курсора.
- Ключевые кадры (Keyframes): Более сложные анимации с множеством этапов.
- Трансформации: Комбинируются с анимациями для вращения, масштабирования или перемещения элементов.
Браузерная поддержка
CSS-анимации поддерживаются всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и Opera. Для старых версий (например, Internet Explorer 9 и ниже) требуется префикс -webkit- или полифилы. Современные браузеры следуют стандартам W3C без префиксов.
См. также
Ссылки
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads