animation-direction в CSS


Свойство animation-direction

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

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

Допустимые значения

  • normal — анимация проигрывается только в прямом направлении
  • alternate — анимация проигрывается в прямом и обратном направлениях
Значение по умолчанию normal
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

Твой код:
Результат:

Заметки

Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation-direction, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes

Про CSS

Css Animation

Свойство animation позволяет анимировать элементы страницы.

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример кода анимации:

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.

Пошаговая анимация step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end — в конце.

step-end . Если выставить step-start , счетчик будет начинаться с единиц.

steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.

Animation-direction

Отвечает за направление анимации.

normal — анимация проигрывается в обычном направлении, с начала и до конца. reverse — анимация проигрывается в обратном направлении, то есть с конца. alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Илон Маск рекомендует:  Что такое код getdcorg

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-direction

Поддержка браузерами

12.0+ 10.0+ 16.0+ 43.0+ 30.0+ 9.0+

Описание

CSS свойство animation-direction указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.

Если значение свойства animation-direction установлено как «alternate», анимация будет проигрываться как «normal» каждый нечетный раз (1,3,5 и тд) и как реверс каждый четный раз (2,4,6 и тд).

Если в настройках анимации установлено проигрывание только однажды, это свойство не будет иметь эффекта.

Свойство animation-direction

В обычном состоянии анимация проигрывается от начала до конца, затем резко, в один момент возвращается в свое первоначальное состояние и, в зависимости от настроек animation-iteration-count , либо повторяется снова, либо больше не воспроизводится.

Резкий возврат анимации из конечного состояния в начальное часто выглядит некрасиво и бросается в глаза. И здесь на помощь приходит свойство animation-direction , которое управляет направлением движения анимации. Например, вы можете сделать так, чтобы по окончанию своего пути анимация возвращалась назад, но не резко, а плавно. Кроме этого, можно заставить анимацию воспроизводиться задом наперед.

Итак, рассмотрим поближе значения свойства animation-direction :

  • normal — значение по умолчанию. Анимация воспроизводится от начала до конца, затем резко возвращается к первоначальному состоянию.
  • alternate — анимация воспроизводится от начала до конца, после чего плавно возвращается к исходному состоянию, что напоминает перемотку назад. Эффект от этого значения не будет заметен, если анимация проигрывается всего один раз.
  • reverse — анимация воспроизводится с конца в начало реверсом, затем резко возвращается в первоначальное состояние, т. е. к первому ключевому кадру.
  • alternate-reverse — значение, объединяющее в себе два предыдущих. Анимация воспроизводится с конца в начало, после чего плавно возвращается в исходное состояние, т. е. к первому ключевому кадру. Эффект от этого значения не будет заметен, если анимация проигрывается всего один раз.


Чтобы указать направление анимации, добавьте правило к стилю элемента:

Далее в учебнике: свойство animation-fill-mode для управления конечным стилем анимации.

CSS3 animation-direction Property

Description

The animation-direction CSS property specifies whether the animation should play in reverse on alternate cycles or not.

The following table summarizes the usages context and the version history of this property.

Илон Маск рекомендует:  s в CSS
Default value: normal
Applies to: All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

normal | reverse | alternate | alternate-reverse | initial | inherit

The example below shows the animation-direction property in action.

Example

Note: The animation-direction property has no effect if the animation is set to play only once, see animation-iteration-count property.

Property Values

The following table describes the values of this property.

Value Description
normal The animation should play forward in each cycle. This is default.
reverse The animation should play backward in each cycle.
alternate The animation plays forward in the first cycle, then play backward, then continues to alternate.
alternate-reverse The animation plays backward in the first cycle, then play forward, then continues to alternate.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-direction property.

Browser Compatibility

The animation-direction property is supported in all major modern browsers.

CSS | Свойство animation-direction

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

Синтаксис:

Значение свойства: свойство animation-direction перечислено ниже:

    normal: это свойство animation воспроизводит анимацию вперед. Это значение по умолчанию.

Синтаксис:

Пример:

ссылка на сайт
brightness_4
код

Выход:

reverse: это свойство animation воспроизводит анимацию в обратном направлении.

Синтаксис:

Пример:

ссылка на сайт
brightness_4
код

Выход:

alternate: это свойство animation воспроизводит анимацию сначала вперед, а затем назад.

Синтаксис:


Пример:

ссылка на сайт
brightness_4
код

Выход:

alternate-reverse: это свойство анимации сначала воспроизводит анимацию назад, а затем вперед.

Синтаксис:

Пример:

ссылка на сайт
brightness_4
код

Выход:

  • initial: это свойство используется, чтобы установить для свойства animation его значение по умолчанию.
  • наследовать: это свойство используется для наследования свойства анимации от его родительского элемента.
  • Поддерживаемый браузер: Браузер, поддерживаемый анимацией, перечислены ниже:

    • Google Chrome 43.0
    • Internet Explorer 10.0
    • Firefox 16.0
    • Safari 9.0
    • Опера 30.0

    adsense2code6

    CSS animation-direction Property

    The CSS animation-direction property sets how animation should be played: forwards, backwards or in alternate cycles. The default value is normal. Each time you run the animation, it will reset to the beginning state and start over.

    The animation-direction property is one of the CSS3 properties.

    Initial Value normal
    Applies to All elements, It also applies to ::before and ::after pseudo-elements.
    Inherited No.
    Animatable No.
    Version CSS3
    DOM Syntax object.style.animationDirection = «reverse»

    Syntax

    Example

    Here is another example, when the animation moved reversed.

    Example

    Here is another example where the animation moved alternate.

    Example

    See another example, when the animation moved alternate-reversed.

    animation-direction

    The animation-direction property specifies whether or not an animation should play in reverse on some or all cycles or iterations.

    You can specify one or multiple comma-separated animation-direction values. When you provide a list of comma-separated values, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay , animation-timing-function , and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

    Илон Маск рекомендует:  Простая таблица

    For example, if you provide two animation-direction values, then the first value determines the direction of the animation of the first animation in the list of animation names provided by animation-name , and the second direction specifies the direction of the second animation.

    The animation-direction property is useful and usually used in conjunction with the animation-iteration-count property. The latter specifies how many times an animation cycle is to be repeated before the animation ends, and when a cycle is repeated more than once, it is useful to allow the animation to play from the end back to the beginning to avoid a “jumping” behavior between cycles. See the animation-iteration-count property entry for details, and the live demo section below.

    The animation-direction property is usually specified as part of the animation shorthand property.

    Trivia & Notes

    When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation timing function would appear to be an ease-out animation.

    Official Syntax


    • Syntax:
  • Initial: normal
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no
  • Values

    Notes

    For the purpose of determining whether an iteration is even or odd, iterations start counting from 1.

    Examples

    The following specifies the animation direction on an element whose animation is set to repeat infinitely, allowing for a smoother transition between the cycles.

    The following does the same thing, but instead of starting the first animation cycle from the beginning, it starts from the end.

    See the live demo section below for a live example.

    Live Demo

    Here is a live demo of the animation-direction property:

    Browser Support

    CSS Animation

    Complex method of animating certain properties of an element

    Свойство animation-direction

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

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

    Допустимые значения

    • normal — анимация проигрывается только в прямом направлении
    • alternate — анимация проигрывается в прямом и обратном направлениях
    Значение по умолчанию normal
    Применимо к блочным и строчным элементам
    Наследование нет
    Версия CSS CSS 3
    Поддерживается браузерами

    Пример

    Твой код:
    Результат:

    Заметки

    Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

    Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation-direction, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes

    Change CSS property when animation direction is reverse

    In my loading animation below I’m trying to create a «comet» that appears to be bouncing from side to side. I’ve nearly achieved it except that the «tail» of the comet needs to flip when it bounces from left to right.

    When it bounces from right to left the angle of the CSS gradient should be 90deg. And when it bounces from left to right the angle should be -90deg.

    Is this possible to do?

    1 Answer 1

    You can integrate the gradient change within the animation. Remove the alternate and add more states within the keyframes to create the alternate effect where you change the gradient for each direction:

    Another idea is to use multiple animation:

    And for this particular case a scale effect can do the job:

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL