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
Новые статьи и публикации
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
- 2025-12-02 » ПромоСтраницы Яндекса: Что такое и для чего служит
- 2025-12-02 » Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам
- 2025-11-26 » Оценка эффективности контента: превращаем информационный балласт в рабочий актив
- 2025-11-26 » 10 причин высокого показателя отказов на сайте
- 2025-11-26 » Когда и зачем обновлять структуру сайта
- 2025-11-26 » Скрытые демотиваторы: как мелочи разрушают эффективность команды
- 2025-11-26 » Зачем запускать MVP и как сделать это грамотно?
- 2025-11-20 » Половина российских компаний сократит расходы на транспорт и маркетинг в 2026 году
- 2025-11-20 » Перенос сайта с большим количеством ссылок
- 2025-11-20 » Перелинковка сайта: Что такое и как ее использовать
- 2025-11-20 » Критерии выбора SEO-специалиста и подрядчика для продвижения сайта
- 2025-11-20 » Применение искусственного интеллекта в рекламных агентствах: комплексное исследование трендов 2025 года
- 2025-11-19 » Геозапросы по-новому: как покорить локальное SEO с помощью ИИ
- 2025-11-14 » Консалтинг: сущность и ключевые направления
- 2025-11-14 » Онлайн-формы: универсальный инструмент для сбора обратной связи
- 2025-11-14 » Факторы конверсии органического трафика
- 2025-11-14 » Планирование рекламного бюджета: самостоятельный подход
- 2025-11-14 » Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж
- 2025-11-13 » Эффективные методы стимулирования клиентов к оставлению положительных отзывов
- 2025-11-13 » Налоговая реформа — 2026: грядущие изменения для предпринимателей
- 2025-11-13 » Альтернативы мессенджерам: что выбрать вместо Telegram и WhatsApp
- 2025-11-13 » Маркировка рекламы для начинающих: полное руководство по требованиям ЕРИР
- 2025-11-13 » ИИ не отберет вашу работу — её займет специалист, владеющий искусственным интеллектом
- 2025-10-29 » Как оценить эффективность работы SEO-специалиста: практическое руководство для маркетологов и владельцев бизнеса
- 2025-10-29 » Киберспорт как маркетинговый инструмент: стратегии привлечения геймеров
- 2025-10-29 » Как говорить с аудиторией о сложном
- 2025-10-29 » Что такое доказательства с нулевым разглашением (ZKP) и их роль в блокчейне
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.