Css direction animation: animation-direction — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

CSS animation direction

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Сначала воспроизвести анимацию вперед, а затем назад:

div {
    animation-direction: alternate;
}

Подробнее примеры ниже.

Определение и использование

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

Значение по умолчанию:normal
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.animationDirection=»reverse»

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

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

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Свойство
animation-direction43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

Синтаксис CSS

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

Значения свойств

ЗначениеОписание
normalЗначение по умолчанию. Анимация воспроизводится как обычная (вперед)
reverseАнимация воспроизводится в обратном направлении (назад)
alternateАнимация сначала разыгрывается вперед, затем назад
alternate-reverseАнимация сначала воспроизводится назад, а затем пересылается
initialПрисваивает этому свойству значение по умолчанию.
(Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Сначала воспроизводите анимацию в обратном направлении, затем вперед:

div {
    animation-direction: alternate-reverse;
}

Пример

Воспроизвести анимацию в обратном направлении:

div {
    animation-direction: reverse;
}

Похожие страницы

CSS Справочник: CSS Анимация

HTML DOM Справочник: animationDirection Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css

внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство animation-direction | CSS справочник

CSS свойства

Определение и применение

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

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации — animation, чтобы установить все свойства анимации в одном объявлении.

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
animation-direction43.0
4.0
-webkit-		16.0
5.0
-moz-		30.0
15.0
-webkit-		9.0
4.0
-webkit-		10.012.0

CSS синтаксис:

animation-direction:"normal | reverse | alternate | alternate-reverse | initial | inherit";
/* несколько значений указываются через запятую */
animation-name:"animationName1, animationName2, animationName3";
animation-direction:"normal, reverse, alternate";

JavaScript синтаксис:

object. style.animationDirection = "normal"

Значения свойства

ЗначениеОписание
normalКаждый раз, когда цикл анимации завершён, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию.
reverseАнимация воспроизводиться в обратном направлении.
alternateАнимация воспроизводиться как normal каждый нечетный раз (1, 3, 5…) и как reverse каждый четный раз (2, 4, 6…).
alternate-reverseАнимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5…) и как normal каждый четный раз (2, 4, 6…).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Направление анимации в CSS</title>
<style>
div {
width: 75px; /* устанавливаем ширину блока */
height: 75px;  /* устанавливаем высоту блока */
border-radius: 60px;  /* определяем форму углов элемента */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
color : white; /* устанавливаем цвет шрифта белый */
padding : 15px; /* устанавливаем внутренние отступы элемента со всех сторон */
position: relative;  /* элемент с относительным позиционированием */
animation-duration: 1.
  5s;  /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
}
.test {
animation-direction: normal; /* при завершении цикла анимации, анимация сбрасывается в начало и начинает цикл заново. */ 
}
.test2 {
animation-direction: reverse; /* анимация воспроизводиться в обратном направлении */ 
}
.test3 {
animation-direction: alternate; /* анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5...) и как reverse каждый четный раз (2, 4, 6...) */ 
}

 
 
.test4 {
animation-direction: alternate-reverse; /* анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5...) и как normal каждый четный раз (2, 4, 6...) */ 
}
@keyframes iliketomoveit {
	0%   {top: 0px;}
	25%  {top: 180px; background: red;}
	75%  {top: 90px;}
	100% {top: 0px; background: black;}
}
</style>
</head>
	<body>
		<div class = "test">normal</div>
		<div class = "test2">reverse</div>
		<div class = "test3">alternate</div>
		<div class = "test4">alternate-reverse</div>
	</body>
</html>
Пример использования CSS свойства animation-direction. CSS свойства

Свойство CSS animation-direction, объяснение

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

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

Давайте рассмотрим, как можно определить это свойство для управления направлением анимации ниже.

Значения направления анимации CSS

Сокращение CSS для направления анимации

Направление анимации CSS Бесконечное

Направление анимации CSS

Что такое направление анимации CSS?

Что такое свойство CSS animation-direction?

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

Синтаксис свойства CSS animation-direction:

 
 направление анимации: нормальное | обратный | альтернативный | альтернативный реверс | начальная | наследовать;

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

Значения направления анимации CSS

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

Обычный

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

Normal — это значение по умолчанию свойства animation-direction в CSS. Поэтому, если вы не установите это свойство, по умолчанию оно будет воспроизводиться вперед.

См. Pen Кристины Перриконе (@hubspot) на CodePen.

В приведенном выше примере анимация начинается с 0, перемещается на 100 пикселей вправо, затем сбрасывается на 0 и повторяется.

Обратное

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

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

См. Pen Кристины Перриконе (@hubspot) на CodePen.

В приведенном выше примере анимация начинается на 100 пикселей вправо, перемещается влево до 0, затем сбрасывается на 100 пикселей и повторяется.

Альтернативный

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

См. Pen Кристины Перриконе (@hubspot) на CodePen.

В приведенном выше примере анимация начинается с 0 пикселей, перемещается на 100 пикселей вправо, возвращается к 0 и снова вправо. Сброса нет, поэтому цикл работает непрерывно в течение двух циклов.

Альтернативно-реверсивный

Если вы используете значение alter-reverse, анимация также будет менять направление каждый цикл. Сначала он будет воспроизводиться назад, а затем вперед.

См. Pen Кристины Перриконе (@hubspot) на CodePen.

В приведенном выше примере анимация начинается на 100 пикселей вправо, перемещается на 100 пикселей влево, возвращается на 100 и снова влево. Сброса нет, поэтому цикл работает непрерывно в течение двух циклов.

Исходное

Начальное значение устанавливает значение свойства animation-direction по умолчанию: normal.

Наследовать

Если указано значение наследования, свойство animation-direction наследует значение своего родительского элемента.

Сокращение CSS для animation-direction

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

 
 анимация: MyDiv 10s 5 легкость чередовать;

Вот пример использования приведенного выше сокращения.

См. Pen Кристины Перриконе (@hubspot) на CodePen.

CSS Animation-Direction Infinite

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

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

См. Pen Infinite Кристины Перриконе (@hubspot) на CodePen.

Управляйте анимацией CSS

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

 

Темы: CSS-анимация

Не забудьте поделиться этим постом!

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

❮ Пред. Следующий ❯

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

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

Анимация-направление Свойство является одним из свойств CSS3.

 направление анимации: нормальное | обратный | альтернативный | альтернативный реверс | начальная | наследовать;

Пример свойства animation-direction: 

 

  <голова>
    <стиль>
      дел {
        ширина: 120 пикселей;
        высота: 120 пикселей;
        фон: #ccc;
        положение: родственник;
        анимация: myfirst 5s 1;
        направление анимации: обычное;
      }
      @ключевые кадры мой первый {
        0% {
          фон: #8DC3CF;
          слева: 0px;
          верх: 0px;
        }
        25% {
          фон: #1c87c9;
          слева: 200 пикселей;
          верх: 0px;
        }
        50% {
          фон: #030E10;
          слева: 200 пикселей;
          верх: 200 пикселей;
        }
        75% {
          фон: #666;
          слева: 0px;
          верх: 200 пикселей;
        }
        100% {
          фон: #8ebf42;
          слева: 0px;
          верх: 0px;
        }
      }
    
  
  <тело>
     
Пример направления анимации
 
    
Здесь анимация воспроизводится в обратном порядке.
  

    <дел>

Попробуй сам »

Пример свойства animation-direction со значением «reverse»: 

 

  <голова>
    <стиль>
      дел {
        ширина: 100 пикселей;
        высота: 100 пикселей;
        фон: #ccc;
        положение: родственник;
        анимация: myfirst 5s 1;
        анимация-направление: реверс;
      }
      @ключевые кадры мой первый {
        0% {
          фон: #8DC3CF;
          слева: 0px;
          верх: 0px;
        }
        25% {
          фон: #1c87c9;
          слева: 200 пикселей;
          верх: 0px;
        }
        50% {
          фон: #030E10;
          слева: 200 пикселей;
          верх: 200 пикселей;
        }
        75% {
          фон: #666;
          слева: 0px;
          верх: 200 пикселей;
        }
        100% {
          фон: #8ebf42;
          слева: 0px;
          верх: 0px;
        }
      }
    
  
  <тело>
     
Пример направления анимации
 
    
В этом примере анимация воспроизводится в обратном порядке.
 
 

    <дел>

Попробуй сам »

Пример свойства animation-direction со значением «alternate»: 

 

  <голова>
    <стиль>
      дел {
        ширина: 100 пикселей;
        высота: 100 пикселей;
        фон: #ccc;
        положение: родственник;
        анимация: myfirst 5s 2;
        направление анимации: альтернативное;
      }
      @ключевые кадры мой первый {
        0% {
          фон: #8DC3CF;
          слева: 0px;
          верх: 0px;
        }
        25% {
          фон: #1c87c9;
          слева: 200 пикселей;
          верх: 0px;
        }
        50% {
          фон: #030E10;
          слева: 200 пикселей;
          верх: 200 пикселей;
        }
        75% {
          фон: #666;
          слева: 0px;
          верх: 200 пикселей;
        }
        100% {
          фон: #8ebf42;
          слева: 0px;
          верх: 0px;
        }
      }
    
  
  <тело>
     
Пример направления анимации
 
    
Здесь анимация сначала воспроизводится вперед, а затем назад. 

    <дел>

Попробуй сам »

Пример свойства animation-direction со значением «alternate-reverse»: 

  <голова> <стиль> дел {
 ширина: 100 пикселей;
 высота: 100 пикселей;
 фон: #ccc;
 положение: родственник;
 анимация: myfirst 5s 1;
 анимация-направление: альтернативное-обратное;
 }
 @ключевые кадры мой первый {
 0% {
 фон: #8DC3CF;
 слева: 0px;
 верх: 0px;
 }
 25% {
 фон: #1c87c9;
 слева: 200 пикселей;
 верх: 0px;
 }
 50% {
 фон: #030E10;
 слева: 200 пикселей;
 верх: 200 пикселей;
 }
 75% {
 фон: #666;
 слева: 0px;
 верх: 200 пикселей;
 }
 100% {
 фон: #8ebf42;
 слева: 0px;
 верх: 0px;
 }
 }   <тело>
Пример направления анимации
Здесь анимация воспроизводится назад, а затем вперед.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *