CSS: Анимация

Анимация — обширный модуль в CSS. К сожалению, описать все возможности за один урок невозможно. В этом уроке будет показан базовый принцип анимации в CSS на основе @keyframes . Для примера, сделаем анимацию текста — цвет текста меняется с голубого на красный.

Для того, чтобы задать анимацию, используется правило @keyframes и название анимации:

@keyframes color-change < // Внутри будет наша анимация >

Название анимации может быть любым. Вы его выбираете самостоятельно. В последствии именно по этому названию свойство animation будет знать, какую именно анимацию необходимо воспроизвести.

Внутри @keyframes необходимо указать различные временные промежутки, в которых будут происходить изменения. Например, на старте (0% завершённости анимации) будет голубой текст, в середине анимации (50%) — красный, и в конце (100%) — возвращаем голубой цвет.

@keyframes color-change < 0% < color: blue; >50% < color: red; >100% < color: blue; >> 

Теперь необходимо применить созданную нами анимацию к тексту на странице. Для этого используется правило animation с тремя основными значениями:

• Название анимации
• Длительность анимации. Указывается в секундах (1s, 2s, 3s и так далее)
• Бесконечная анимация или нет (если бесконечная, то указывается параметр infinite)

.animation-text

Осталось создать параграф с необходимым классом, и анимация начнёт работать.

Текст с анимацией color-change. Цвет текста меняется с голубого на красный и обратно

Задание

Создайте анимацию, меняющую цвет текста с чёрного на белый. Примените анимацию к классу black-white . Стили запишите в теге . После, оберните произвольный текст в тег

и укажите для него класс black-white .

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Анимация текста css

Есть два небольших вопроса. Почему при завершении анимации состояние текста возвращается в исходное. И как сделать так чтобы анимация выполнялась только при клике на заголовок. Сейчас При запуске кода она выполняется сразу на активный элемент

var section = $('.element'); function toggleAccordion() < section.removeClass('active'); $(this).addClass('active'); >section.on('click', toggleAccordion);

.container < margin-top: 150px; display: flex; flex-direction: row; justify-content: space-between; >.element < display: flex; flex-direction: row; justify-content: space-between; >h1 < white-space: nowrap; transform: rotate(-90deg); >.element p < visibility: hidden; >.active < display: flex; flex-direction: column; justify-content: space-between; >.active p < animation: open .5s; >.active h1 < animation: newanim-in .5s; >@keyframes newanim-in < 0%< transform: rotate(-90deg); >100% < transform: rotate(0); >> @keyframes open < 0% < display: block; opacity: 0; visibility: hidden; >100% < display: block; opacity: 1; visibility: visible; >>

 
 
Lorem
 
Lorem ipsum dolor sit amet
 
 
ipsum
 
Lorem ipsum dolor sit amet
 
 
dolor
 
Lorem ipsum dolor sit amet
 
 

Использование CSS-анимации

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Есть три преимущества CSS-анимации перед традиционными способами:

1. Простота использования для простых анимаций; вы можете создать анимацию, не зная JavaScript.
2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

Чтобы создать CSS-анимацию вы должны добавить в стиль элемента, который хотите анимировать, свойство animation или его подсвойства. Это позволит вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет вам настроить внешний вид анимации, который настраивается с помощью @keyframes (en-US), рассматриваемой далее в Определение последовательности анимации с помощью ключевых кадров.

Свойство animation имеет следующие подсвойства:

Определяет имя @keyframes (en-US), настраивающего кадры анимации.

Определяет время, в течение которого должен пройти один цикл анимации.

Настраивает ускорение анимации.

Настраивает задержку между временем загрузки элемента и временем начала анимации.

Определяет количество повторений анимации; вы можете использовать значение infinite для бесконечного повторения анимации.

Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.

Настраивает значения, используемые анимацией, до и после исполнения.

Позволяет приостановить и возобновить анимацию.

Определение последовательности анимации с помощью ключевых кадров

После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после @keyframes (en-US). Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.

Примеры

Примечание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе от правого края окна браузера.

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow : hidden .

p  animation-duration: 3s; animation-name: slidein; > @keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > > 

В стиле для элемента с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes (en-US), описывающей саму анимацию, определено как «slidein».

Ключевые кадры определяются с помощью правила @keyframes (en-US). В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации ( from ). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок находится за пределами правого края окна браузера .

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок приплывает к левому краю окна браузера.

p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p> 

(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

Добавление других ключевых кадров

Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возвращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:

75%  font-size: 300%; margin-left: 25%; width: 150%; > 

p  animation-duration: 3s; animation-name: slidein; > @keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > 75%  font-size: 300%; margin-left: 25%; width: 150%; > > 

p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p> 

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

Настройка повторения

Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:

p  animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; > 

@keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > > 

p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p> 

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :

p  animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; > 

@keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > > 

p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice. p> 

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

p  animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; > 

можно заменить на:

p  animation: 3s infinite alternate slidein; > 

Примечание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

CSS-свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:

animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; animation-iteration-count: 1; 

Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.

animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5; 

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1; 

Использование событий анимации

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом AnimationEvent (en-US), можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться «slidein», будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах @keyframes (en-US) установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

.slidein  -moz-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; animation-direction: alternate; > @-moz-keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > > @-webkit-keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > > @keyframes slidein  from  margin-left: 100%; width: 300%; > to  margin-left: 0%; width: 100%; > > 

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); e.className = "slidein"; 

Это довольно стандартный код; вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее, что делает этот код — это установка класса «slidein» для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener() , показанной ниже.

function listener(e)  var l = document.createElement("li"); switch (e.type)  case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; > document.getElementById("output").appendChild(l); > 

Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события, и добавляет элемент , чтобы залогировать произошедшее событие.

Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:

• Started: elapsed time is 0
• New loop started at time 3.01200008392334
• New loop started at time 6.00600004196167
• Ended: elapsed time is 9.234000205993652

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .

HTML

Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

body> h1 id="watchme">Watch me moveh1> p> This example shows how to use CSS animations to make code>pcode> elements move across the page. p> p> In addition, we output some text each time an animation event fires, so you can see them in action. p> ul id="output">ul> body> 

Смотрите также

• AnimationEvent
• Определение поддержки CSS-анимации
• Использование CSS-переходов (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как создать анимацию набора текста в CSS? Пошаговое руководство

CSS-анимация — это простой способ добавить дополнительные интерактивные элементы на ваш сайт. Даже самый простой анимационный эффект может превратить скучную статичную веб-страницу в интересный и увлекательный веб-проект.

В этой статье мы покажем вам, как добиться эффекта анимации ввода текста с помощью CSS. С этим эффектом текст на экране будет выглядеть так, как если бы он печатался на пишущей машинке или в текстовом процессоре.

Как создать анимацию набора текста в CSS?

Давайте пошагово рассмотрим процесс создания:

Создайте текстовый документ

Для начала напишем HTML-код, который будем анимировать. Создадим контейнер div с контейнером class, который содержит текстовый элемент. Внутри контейнера поместим абзац, добавим этому абзацу типизированный класс и вставим любой текст:

< p class =» typed «>This is a paragraph of typed text.

В этом примере мы используем элемент p, но вы также можете использовать любой элемент, который содержит текст, например h1.

Анимируйте текст

Далее мы будем использовать анимацию CSS, чтобы добавить эффект набора текста. В своем CSS установите контейнер div, как встроенный блок со свойством display.

С помощью установки display на inline-block ширина контейнера div будет равна ширине текста абзаца внутри. Затем необходимо стилизовать наш типизированный элемент свойствами:

• overflow: hidden гарантирует, что текст не будет виден за краем элемента;
• white-space: nowrap удерживает текст на одной строке;
• width: 0 скрывает текст в начале анимации.

Вот как будет выглядеть CSS:

Теперь самое интересное — добавление анимации. Создадим правило @keyframes в своем CSS:

Это правило изменяет ширину нашего элемента абзаца с 0 (т. е. невидимого) до 100% ширины его родительского элемента. Далее добавим несколько дополнительных свойств CSS в наш класс .typed:

• animation: typing присваивает созданное нами правило @keyframes классу .typed;
• animation-duration: 1.5s делает анимацию продолжительностью 1,5 секунды;
• animation-timing-function: steps(30, end) заставляет анимацию воспроизводиться пошагово, а не плавно. Это важно, поскольку создает эффект «напечатанности». 30 — это количество шагов анимации, и эти шаги распределяются равномерно до конца анимации;
• animation-fill-mode: forwards гарантирует, что после завершения анимации элемент абзаца останется со 100% шириной. В противном случае ширина будет сброшена до 0.

Вот как будет выглядеть CSS:

animation-timing-function : steps (30, end); animation-fill-mode : forwards;

В зависимости от длины вашего текста вы можете увеличивать или уменьшать продолжительность и количество шагов анимации, чтобы добиться нужного эффекта.

Добавьте курсор

Полученную анимацию можно сделать еще лучше с помощью добавления эффекта «курсор» — это поможет создать эффект печати.

Добавить курсор просто: необходимо использовать правую границу нашего элемента абзаца, которая перемещается по мере увеличения ширины элемента абзаца. Просто добавьте border-right: 2px solid к вашему блоку .typed CSS. Вы также можете настроить ширину и цвет границы по своему вкусу.

Сделайте курсор мигающим

Чтобы добавить курсору эффект мерцания, вам необходимо создать второе правило @keyframes под названием blinking, которое начинает цвет границы как прозрачный, затем меняет его на черный, а затем снова на прозрачный:

Необходимо применить это правило @keyframes к нашему блоку .typed CSS. Вы можете установить продолжительность мигания на одну секунду или сделать его бесконечным.

Отцентрируйте текст

В самом конце мы рекомендуем отцентрировать анимацию. Для этого возьмем код, который у нас есть, и внесем небольшие изменения в контейнер:

• Изменим отображение контейнера с встроенного блока на сетку;
• Добавим place-items: center для контейнера;
• Установим ширину контейнера на 350 пикселей.

Вот такой код у нас получится:

border-right : 2px solid;

animation : typing 1.5s steps (30, end) forwards, blinking 1s infinite;

&copy 2023 BINN. Все права защищены Условия передачи информации
Подписка оформлена
Отправить заявку
Ваша заявка успешно отправлена.
Мы свяжемся с вами в ближайшее время.

Условия передачи информации

Я даю согласие OOO «ЭсБилдер» (далее «BINN») на обработку моих персональных данных в соответствии со статьями 6, 9, 10, 18 Федерального закона от 27 июля 2006 года № 152-ФЗ «О персональных данных», указанных в онлайн-форме и/или предоставленных мною с целью:

• заключения с BINN договоров на разработку сайта, аудит и консалтинг, продвижение сайта, поддержку сайта.
• в любых других целях, прямо или косвенно касающихся услуг, связанных с сайтом и/или направлением мне информации об услугах BINN.
• получение работы в компании.

Способы обработки персональных данных могут быть любыми, включая сбор, систематизацию, накопление, хранение, уточнение, обновление, изменение, воспроизведение, обезличивание, блокирование и уничтожение.

Настоящее согласие применяется в отношении обработки следующих данных: имя, номер телефона, адрес электронной почты (E-mail).

Настоящее согласие предоставляется сроком на пять лет. По истечении указанного срока действие согласия считается продленным на каждые следующие пять лет при отсутствии сведений о его отзыве.

Согласие может быть отозвано мною в любой момент путем направления в BINN подписанного мною письменного заявления.