Css Animation
26/09/2013
- Содержание:
- @keyframes
- animation-name
- animation-duration
- animation-timing-function
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-delay
- animation-fill-mode
Свойство animation позволяет анимировать элементы страницы.
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.
Спецификация: w3.org/TR/css3-animations
Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами
Пример Css-анимации:
Пример кода анимации:
@keyframes move {
40% {
left: 50%;
bottom: 75%;
animation-timing-function: ease-in;
}
80% {
left: 90%;
bottom: -10em;
}
}Подключение анимации:
.sun {
animation: move 15s infinite linear;
}move — имя анимации 15s — длительность infinite — бесконечное повторение linear — тип движения
@keyframes
Сама анимация задается внутри блока @keyframes. После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.
Шаги можно задавать через проценты или с помощью ключевых слов from и to. При этом в шагах можно менять тип анимации (animation-timing-function):
Animation-name
Используется для задания имени анимации.
Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.
animation-name: move; — одна анимация. animation-name: move, sun-color; — две анимации, имена задаются через запятую.
Animation-duration
Длительностью анимации управляет свойство animation-duration.
Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Animation-timing-function
Свойство определяет тип анимации.
Возможные значения:
Плавная анимация ease — скольжение (значение по умолчанию) linear — ровное движение ease-in — ускорение к концу ease-out — ускорение в начале ease-in-out — более плавное скольжение, чем ease
cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.
cubic-bezier(.24,1.49,.29,-0.48);
Пошаговая анимация step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end — в конце.
step-end. Если выставить step-start, счетчик будет начинаться с единиц.
steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.
steps(60)
Animation-iteration-count
Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).
Возможные значения:
число — сколько раз проиграть анимацию. infinite — бесконечное повторение.
Animation-direction
Отвечает за направление анимации.
Возможные значения:
normal — анимация проигрывается в обычном направлении, с начала и до конца. reverse — анимация проигрывается в обратном направлении, то есть с конца. alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.
Animation-play-state
Управляет остановкой и проигрыванием анимации.
Возможные значения: running — анимация проигрывается (значение по умолчанию). paused — анимация застывает на первом шаге.
Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover:
Animation-delay
С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.
Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.
Animation-fill-mode
Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.
Возможные значения:
none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards — анимация воздействует на элемент по окончании воспроизведения. backwards — анимация воздействует на элемент до начала воспроизведения. both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.
Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s;. Так же для этого имеет смысл открыть пример в новом окне.
Все эти свойства можно записать с помощью короткой записи, например:
animation: timing 5s infinite alternate;Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.
Источник: http://css.yoksel.ru/css-animation/
|
Свойство animation позволяет анимировать элементы страницы. Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы. |
Css Animation, Css, анимация |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2026-07-15 » ИИ-агент как сотрудник: права, журнал действий и управление доступом через BearPass
- 2026-07-15 » Как проверить юриста, адвоката или нотариуса онлайн: пошаговое руководство для бизнеса
- 2026-07-15 » Телефон в вашем кармане действительно следит: кто, зачем и как это остановить
- 2026-07-15 » Куки и трекеры: какую информацию о вас собирают сайты и как это отключить
- 2026-07-15 » Почему корпоративный мессенджер — это не роскошь, а необходимость для бизнеса
- 2026-07-15 » Реклама на Авито, которая реально работает
- 2026-07-15 » Реклама на Авито, которая реально работает
- 2026-07-10 » Корпоративный сайт, который показывает масштаб компании, укрепляет доверие и ведет клиента к целевому действию
- 2026-07-10 » Сайт бронирования, который превращает интерес клиента в прямую бронь, запись или заявку
- 2026-07-10 » Образовательный сайт под ключ
- 2026-07-03 » Аналитика нового поколения: как Яндекс Метрика превращает данные в управляемые конверсии
- 2026-07-03 » Прорыв в инфлюенс-маркетинге: Яндекс Директ научился оптимизировать рекламу в Telegram и MAX под реальные продажи
- 2026-07-03 » Нейросетевой дуэт: как Gorgona и Argus меняют правила игры в контекстной рекламе Яндекса
- 2026-07-03 » Рекламная революция в «Яндекс Директе»: с 14 июля текстово-графические объявления окончательно уступают место комбинаторным
- 2026-07-03 » Макс запустил тест комментариев в публичных каналах
- 2026-07-01 » Уникальность текста: когда копировать контент можно, а когда нельзя
- 2026-07-01 » Локальный поиск в 2026 году: как алгоритмы ранжируют бизнес
- 2026-07-01 » ПромоСтраницы Яндекса: инструмент, который меняет правила игры в контент-маркетинге
- 2026-07-01 » Контент для строительных компаний: какими текстами наполнить сайт, чтобы он приносил клиентов
- 2026-07-01 » Искусство диалога с ИИ: как составить промпт, чтобы нейросеть поняла вас с полуслова
- 2026-06-26 » Новый виток эффективности: товарные объявления в Директе теперь работают на ретаргетинг мобильных приложений
- 2026-06-26 » Характеристики товаров в Товарной галерее Яндекса: как одна деталь увеличивает продажи на 4%
- 2026-06-26 » Новая реальность контент-маркетинга: треть цитируемых ChatGPT страниц невидимы для Google
- 2026-06-26 » Конец текстово-графических объявлений: Яндекс Директ переводит ЕПК на комбинаторный формат
- 2026-06-26 » Конец эпохи: Google окончательно отключает блокировщики рекламы в Chrome
- 2026-06-10 » Новые штрафы за неисполнение правил авторизации
- 2026-06-10 » Новая реальность: MAX под прицелом
- 2026-06-10 » Банки и операторов связи обяжут компенсировать похищенное мошенниками
- 2026-06-10 » Что такое «белый VPN» и чем он отличается от обычного?
- 2026-06-10 » Когда ИИ придумывает «факты»: анатомия кризиса вымышленной статистики
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.