diff options
Diffstat (limited to 'files/ru/web/css/css_animations/using_css_animations/index.html')
| -rw-r--r-- | files/ru/web/css/css_animations/using_css_animations/index.html | 388 |
1 files changed, 388 insertions, 0 deletions
diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..05f6cb5cec --- /dev/null +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,388 @@ +--- +title: Использование CSS-анимации +slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<p><span class="seoSummary">CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой.</span> CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.</p> + +<p>Есть три преимущества CSS-анимации перед традиционными способами:</p> + +<ol> + <li>Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.</li> + <li>Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .</li> + <li>Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.</li> +</ol> + +<h2 id="Конфигурирование_анимации">Конфигурирование анимации</h2> + +<p>Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.</p> + +<p>Свойство {{ cssxref("animation") }} имеет следующие подсвойства:</p> + +<dl> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>Определяет имя {{ cssxref("@keyframes") }}, настраивающего кадры анимации.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>Определяет время, в течение которого должен пройти один цикл анимации.</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>Настраивает ускорение анимации.</dd> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Настраивает</span> <span class="hps">задержку</span> <span class="hps">между временем загрузки элемента и временем начала анимации</span></span>.</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>Позволяет приостановить и возобновить анимацию.</dd> +</dl> + +<h2 id="Определение_последовательности_анимации_с_помощью_ключевых_кадров">Определение последовательности анимации с помощью ключевых кадров</h2> + +<p><span id="result_box" lang="ru"><span class="hps">После того, как</span> <span class="hps">вы настроили</span> <span class="hps">временные свойства (продолжительность, ускорение)</span> <span class="hps">анимации</span><span>, вы</span> <span class="hps">должны определить</span> <span class="hps">внешний вид</span> <span class="hps">анимации</span></span>. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.</p> + +<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p> + +<p>Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.</p> + +<h2 id="Примеры">Примеры</h2> + +<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.</div> + +<h3 id="Скольжение_текста">Скольжение текста</h3> + +<p>Этот простой пример анимирует скольжение текста в элементе {{ HTMLElement("p") }} от правого края окна браузера.</p> + +<p>Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство {{cssxref("overflow")}}<code>: hidden</code>.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>В стиле для элемента {{ HTMLElement("p") }} с помощью свойства {{ cssxref("animation-duration") }} указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для {{ cssxref("@keyframes") }}, описывающей саму анимацию, определено как "slidein".</p> + +<p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p> + +<p>Kлючевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> + +<p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p> + +<pre class="brush: html"><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> +</pre> + +<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p> + +<p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p> + +<h3 id="Добавление_других_ключевыч_кадров">Добавление других ключевыч кадров</h3> + +<p>Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:</p> + +<pre class="brush: css">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> + +<pre class="brush: css">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%; + } +} +</pre> + +<pre class="brush: html"><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> +</pre> + +<p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p> + +<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p> + +<p>{{ EmbedLiveSample('Добавление_других_ключевыч_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p> + +<h3 id="Настройка_повторения">Настройка повторения</h3> + +<p>Чтобы настроить повторение, нужно добавить свойство {{ cssxref("animation-iteration-count") }} и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение <code>infinite</code> для бесконечного повторения:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<pre class="brush: css">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample("Настройка_повторения","100%","250")}}</p> + +<h3 id="Движение_текста_вправо_и_влево">Движение текста вправо и влево</h3> + +<p>Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова "запрыгивает" за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству {{ cssxref("animation-direction") }} значения <code>alternate</code>:</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<pre class="brush: css">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html"><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> +</pre> + +<p>{{ EmbedLiveSample('Движение_текста_вправо_и_влево', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p> + +<h3 id="Использование_шорткодов">Использование шорткодов</h3> + +<p>Шорткод {{cssxref("animation")}} полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:</p> + +<pre><code>p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +}</code></pre> + +<p>можно заменить на:</p> + +<pre><code>p { + animation: 3s infinite alternate slidein; +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>Внимание</strong>: подробнее об этом на странице раздела {{cssxref("animation")}} </p> +</div> + +<h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации </h3> + +<p>CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> + +<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p> + +<pre><code>animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 3s; +animation-iteration-count: 1;</code></pre> + +<p>Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, <code>fadeInOut</code> имеет продолжительность 2.5 с и количество повторений 2, и т.д.</p> + +<pre><code>animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s, 1s; +animation-iteration-count: 2, 1, 5;</code></pre> + +<p>В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у <code>fadeInOut</code> длительность будет 2.5s, а <code>moveLeft300px</code> — 5s. Значения продолжительности закончились, теперь они берутся сначала — <code>bounce</code> получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.</p> + +<pre><code>animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s; +animation-iteration-count: 2, 1;</code></pre> + +<h3 id="Использование_событий_анимации">Использование событий анимации</h3> + +<p>Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью <em>событий анимации</em>. Эти события, представленные объектом {{ domxref("event/AnimationEvent", "AnimationEvent") }}, можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.</p> + +<p>Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.</p> + +<h4 id="Добавление_CSS">Добавление CSS</h4> + +<p>Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p> + +<pre class="brush: css">.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%; + } +}</pre> + +<h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4> + +<p>Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p> + +<pre class="brush: js">var e = document.getElementById("watchme"); +e.addEventListener("animationstart", listener, false); +e.addEventListener("animationend", listener, false); +e.addEventListener("animationiteration", listener, false); + +e.className = "slidein"; +</pre> + +<p>Это довольно стандартный код; Вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.</p> + +<p>Почему? Потому что в нашем случае событие <code>animationstart</code> происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.</p> + +<h4 id="Регистрация_событий">Регистрация событий</h4> + +<p>События будут передаваться функции <code>listener()</code>, показанной ниже.</p> + +<pre class="brush: js">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); +} +</pre> + +<p>Этот код также очень прост. Этот код следит за {{ domxref("event.type") }}, чтобы определить тип события, и добавляет элемент {{ HTMLElement("ul") }}, чтобы залогировать произошедшее событие.</p> + +<p>Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:</p> + +<ul> + <li>Started: elapsed time is 0</li> + <li>New loop started at time 3.01200008392334</li> + <li>New loop started at time 6.00600004196167</li> + <li>Ended: elapsed time is 9.234000205993652</li> +</ul> + +<p>Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие <code>animationiteration</code> ; вместо него посылается событие <code>animationend</code>.</p> + +<h4 id="HTML">HTML</h4> + +<p>Ради полноты картины приведем код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p> + +<pre class="brush: html"><body> + <h1 id="watchme">Watch me move</h1> + <p>This example shows how to use CSS animations to make <code>p</code> 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> +</pre> + +<p>{{ EmbedLiveSample('Использование_событий_анимации', '600', '300')}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> + <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Определение поддержки CSS анимации</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Использование CSS-переходов</a></li> +</ul> |