STYLE - Сводная таблица стилей CSS

Текст

• normal - нормальный (по умолчанию),
• italic - курсив,
• oblique - наклонный.

• normal - нормальный (по умолчанию),
• small-caps - все буквы малые заглавные (капитель).

• line-through - перечеркнутый текст.
• overline - надчеркнутый текст.
• underline - подчеркнутый текст.
• none - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

• line-through - перечеркнутый текст,
• overline - надчеркнутый текст,
• underline - подчеркнутый текст,
• none - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

• solid - одинарная линия (по умолчанию),
• double - двойная линия,
• dotted - точечная линия,
• dashed - пунктирная линия,
• wavy - волнистая линия.

Пример

• clip - Текст обрезается по размеру заданной области.
• ellipsis - Текст обрезается по размеру заданной области и в конце строки добавляется многоточие.

• capitalize - Каждое слово в предложении будет начинаться с заглавной буквы.
• lowercase - Все буквы текста будут строчными (нижний регистр).
• uppercase - Все буквы текста будут прописными (верхний регистр).
• none - Отменяет все эффекты.

• baseline - Выравнивает базовую линию элемента по базовой линии родительского элемента (по умолчанию).
• sub - Элемент сдвигается вниз (как нижний индекс, но размер шрифта не меняется).
• super - Элемент сдвигается вверх (как верхний индекс, но размер шрифта не меняется).
• text-top - Верхняя граница элемента выравнивается по самой высокой части текста в текущей строке.
• text-bottom - Нижняя граница элемента выравнивается по самой нижней части текста в текущей строке.
• top - Верхняя граница элемента и его потомков выравнивается по верхней границе строки.
• middle - Центр элемента по вертикали выравнивается по нижней границе родительского элемента + половина высоты строчной буквы.
• bottom - Нижняя граница элемента и его потомков будет выравниваться по нижней границе строки.
• значение - Элемент сдвигается на указанную величину вверх или вниз относительно базовой линии.
• проценты - Элемент сдвигается на указанную величину (процент от значения line-height) вверх или вниз относительно базовой линии.

• top - Ячейка выравнивается по верху строки таблицы.
• middle - Ячейка выравнивается по середине строки таблицы.
• bottom - Ячейка выравнивается по низу строки таблицы.

• normal - Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
• nowrap - Переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега <br> переносит текст на новую строку.
• pre - Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. Таким образом, white-space:pre; имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

• normal - Перенос строк устанавливается по умолчанию.
• break-all - Слова, которые не помещаются целиком в заданную область, разрываются переносом строки. Не работает для китайского, корейского и японского текста.
• keep-all - Запрещает перенос строк в словах китайского, корейского и японского текста. Для остальных работает как normal.

• normal - Нормальный перенос слов (по умолчанию).
• break-word - Слова, которые не помещаются целиком в заданную область, разрываются переносом строки.

Фон

• fixed - Делает фоновое изображение элемента неподвижным.
• scroll - Позволяет фону перемещаться вместе с содержимым (по умолчанию).

• border-box - Фон отображается до внешнего края границы элемента.
• padding-box - Фон отображается до внутренного края границы элемента.
• content-box - Фон отображается только внутри контента.

• border-box - фоновое изображение начинается от внешнего края границы элемента.
• padding-box - фоновое изображение начинается от внутреннего края границы элемента.
• content-box - фоновое изображение начинается только в зоне контента.

• no-repeat - Одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position.
• repeat - Фоновое изображение повторяется по горизонтали и вертикали.
• repeat-x - Фоновый рисунок повторяется только по горизонтали.
• repeat-y - Фоновый рисунок повторяется только по вертикали.

• значение - Ширина и высота фонового изображения в прямом виде.
• проценты - Ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
• contain - Изображение масштабируется, сохраняя пропорции, по большей стороне так, чтобы картинка целиком поместилась внутрь блока.
• cover - Изображение масштабируется, сохраняя пропорции, по меньшей стороне так, чтобы его ширина или высота равнялась ширине или высоте блока.
• auto - Если задано для ширины и высоты (auto auto), то размеры фонового изображения остаются исходными (по умолчанию); если только для одной стороны (100px auto), то размер вычисляется автоматически исходя из пропорций изображения.

Поля и отступы

• если у блоков на стороне объединения задано свойство padding,
• если у блоков на стороне объединения задано свойство border,
• если у блоков задано свойство position:absolute,
• если у блоков задано свойство float,
• для flex-элементов.

Рамки (границы)

Поддержка border-image современными браузерами неплохая.

• толщина - Ширина рамки в px или em (аналог свойства border-width).
• число - Число, на которое умножается значение свойства border-width.
• % - Ширина рамки относительно размеров элемента. Горизонтальные размеры относительно ширины, вертикальные – относительно высоты.
• auto - Ширина рамки равна значению border-image-slice.

• число - Значения, которые указывают в пикселях размеры частей рисунка для рамки, задавая тем самым области деления. Единицы (px) не пишутся, т.е. 30, а не 30px.
• % - Размеры частей рисунка в пикселях относительно размеров рисунка. Горизонтальные относительно ширины, вертикальные – относительно высоты.
• fill - Обозначает, что рисунок не обрезается внутренним краем рамки, а заполняет также область внутри рамки (задается вместе с числом или процентами).

• stretch – Рисунок растягивается (по умолчанию).
• repeat – Рисунок повторяется.
• round – Рисунок повторяется и масштабируется, чтобы рамки состояла из целого числа рисунков.
• space – Аналогично repeat.

• величина - отступ рамки за пределы границ элемента в px или em,
• число - число, на которое умножается значение свойства border-width, для задания отступа.

В поддержке свойства outline браузерами еще есть проблемы.

Пример

Горизонтальная разделительная линия

Отображение

• block - Блочный элемент. Соответствует блочным элементам HTML, т. е. отображается как отдельный абзац. При его отображении генерируется главный прямоугольник блока, в котором располагаются объемлющие прямоугольники потомков данного элемента.
• flex - Блочный flex-контейнер для дочерних flex-элементов в методе позиционирования Flexbox.
• inline - Строчный элемент. Соответствует текстовым элементам HTML, т. е. отображается как текстовые строки внутри текущего абзаца, точнее внутри главного прямоугольника соответствующего блока.
• inline-block - Это значение генерирует блочный элемент, который обтекается другими элементами Web-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на <img>. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент - как строчный.
• inline-flex - Строчный flex-контейнер для дочерних flex-элементов в методе позиционирования Flexbox.
• inline-table - Определяет, что элемент является таблицей, как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
• list-item - Элемент списка. Отображается как блочный элемент с добавлением к нему маркера элемента списка.
• none - Элемент и все его потомки игнорируются при отображении.
• run-in - Устанавливает элемент как блочный или встроенный в зависимости от контекста.
• table - Определяет, что элемент является блочной таблицей подобно <table>.
• table-caption - Задает заголовок таблицы подобно <caption>.
• table-cell - Указывает, что элемент представляет собой ячейку таблицы подобно <td>.
• table-column - Назначает элемент колонкой таблицы подобно <col>.
• table-column-group - Определяет, что элемент является группой одной или более колонок таблицы подобно <colgroup>.
• table-header-group - Группа надзаголовков таблицы подобно <thead>.
• table-footer-group - Группа подзаголовков таблицы подобно <tfoot>.
• table-row - Элемент отображается как строка таблицы подобно <tr>.
• table-row-group - Создает структурный блок, состоящий из нескольких строк таблицы подобно <tbody>.

• visible – Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
• hidden – Отображается только область внутри элемента, остальное будет обрезано.
• scroll – Всегда добавляются полосы прокрутки.
• auto – Полосы прокрутки добавляются только при необходимости.

• left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
• right - Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
• none - Обтекание элемента не задается.

• both – Отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
• left – Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
• right – Отменяет обтекание с правой стороны элемента.
• none – Отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.

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

clip: rect(Y1, X1, Y2, X2) | auto

В качестве значения используется расстояние от края элемента до области вырезки, которое задается в единицах CSS - пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рисунке:

<style type="text/css">
#layer {
position: absolute; /* Абсолютное позиционирование */
clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */
width: 200px; /* Ширина блока */
color: white; /* Цвет текста */
background: #7f4c3e; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
}
</style>
<div id="layer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>
</div>

• content-box – Свойства width и height задают ширину и высоту содержимого элемента, не включая в себя значения границ (border), полей (padding) и отступов (margin).
• border-box – Свойства width и height задают ширину и высоту элемента вместе со значениями границ (border) и полей (padding), не включая значения отступов (margin).
• padding-box – Свойства width и height задают ширину и высоту элемента вместе со значениями полей (padding), не включая значения границ (border) и отступов (margin).

• hidden - Элемент становится невидимым или, точнее, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы,
• visible - Отображает элемент как видимый,
• collapse - Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено стилевое свойство display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой.

• fill - Размер элемента соответствует заданному, пропорции исходного изображения игнорируются,
• contain - Элемент масштабируется, сохраняя пропорции так, чтобы целиком поместиться в заданную область,
• cover - Элемент масштабируется, сохраняя пропорции так, чтобы полностью заполнить заданную область,
• none - Размер элемента остаётся исходным, заданный размер игнорируется,
• scale-down - Размер элемента соответствуют меньшему из размеров при указании значения none или contain.

Пример

Позиционирование

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

• absolute - Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на Web-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
• fixed - По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании Web-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
• relative - Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
• static - Элементы отображаются как обычно. Использование свойств top, right, bottom, left, не приводит к каким-либо результатам.
• sticky - Элемент фиксируется в рамках родителя, когда расстояние до границы родителя достигает значения, указанного в свойствах left, top, right или bottom. Прилипающее позиционирование является гибридом относительного и фиксированного позиционирования. Пример

Прилипание position:sticky не сработает, если:

• высота элемента с position: sticky; равна высоте родителя,
• уже достигнуто конечное положение элемента,
• у родительского элемента свойство overflow отлично от visible,
• не задано ни одно из свойств top, right, bottom, left.

В поддержке position: sticky; браузерами еще есть проблемы.

Таблицы

• separate - Каждая ячейка имеет свою рамку (по умолчанию),
• collapse - Общая граница для ячеек таблицы.

• auto - Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
• fixed - Значение повышает производительность построения таблиц. Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого параметра содержимое, которое не помещается в ячейку указанной ширины, будет обрезано либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет.

• top - Располагает заголовок по верхнему краю таблицы.
• bottom - Заголовок располагается под таблицей.
• right - Заголовок размещается справа от таблицы. Это значение работает только в Firefox.
• left - Заголовок размещается слева от таблицы. Это значение работает только в Firefox.

Списки

• outside - Маркер вынесен за границу элемента списка.
• inside - Маркер обтекается текстом.

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none

Эффекты

• all-scroll - Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении
  I {cursor: all-scroll;}
• auto - По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте.
• col-resize - Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали.
• crosshair - Курсор-крест.
• default - Стандартный курсор, используемый системой.
• help - Стрелка с вопросительным знаком.
• move - Курсор со 4 стрелками, показывающий возможность перемещения.
• no-drop - Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора. Все браузеры, кроме IE, отображают как not-allowed.
• not-allowed - Перечеркнутый круг. Данная операция не поддерживается.
• pointer - Рука с вытянутым указательным пальцем, как на гиперссылке.
• progress - Курсор, показывающий на продолжение операции.
• row-resize - Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали.
• text - Текстовый курсор-каретка.
• url(uri) - Ваш собственный курсор. Поддерживаются файлы .cur и .ani
  {cursor:url(elogo.cur);}
• vertical-text - Горизонтальная текстовая каретка для вертикального текста.
• wait - Курсор, показывающий, что система занята и требуется подождать.
• N-resize, NE-resize, NW-resize, S-resize, SE-resize, SW-resize, E-resize, W-resize - Курсоры-стрелки с определением направления стрелок
  {cursor: n-resize;}

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

• auto - Ширина полосы прокрутки по умолчанию.
• thin - Тонкий вариант ширины полосы прокрутки в браузерах, которые предоставляют эту возможность, или более тонкая полоса прокрутки, чем ширина полосы прокрутки браузера по умолчанию.
• none - Полоса прокрутки не показывается, однако элемент все равно прокручивается.

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

Переходы
(изменение значений CSS-свойств элемента в течение заданного времени)

• all – Все свойства элемента (по умолчанию).
• свойства – Одно или несколько свойств элемента, указанных через запятую.
  div.block {backgrond-color:#0ff;transition-property:backgrond-color;}
  div.block:hover {backgrond-color:#ff0;}

Объектная модель:
document.getElementById("elementID").style.transitionProperty

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

Устанавливает продолжительность перехода в секундах или миллисекундах.
div.block {transition-duration:0.3s;}
или
div.block {transition-duration:300ms;}

Объектная модель:
document.getElementById("elementID").style.transitionDuration

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

• ease – Переход начинается медленно, резко ускоряется, а затем постепенно замедляется к концу (по умолчанию).
• ease-in – Переход начинается медленно, ускоряется к концу.
• ease-out – Переход начинается быстро, замедляется к концу.
• ease-in-out – Переход начинается медленно, постепенно ускоряется, а затем постепенно замедляется к концу.
• linear – Переход начинается и заканчивается с одинаковой скоростью.
• cubic-bezier – Скорость перехода задается в виде кривой Безье.

Объектная модель:
document.getElementById("elementID").style.transitionTimingFunction Пример

Поддержка transition-timing-function браузерами

Устанавливает задержку перехода в секундах или миллисекундах.
div.block {transition-delay:0.3s;}
или
div.block {transition-delay:300ms;}
Значание по умолчаню – 0s (без задержки).

Объектная модель:
document.getElementById("elementID").style.transitionDelay

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

Устанавливает сразу несколько параметров перехода.
[transition-property]||transition-duration||[transition-timing-function]||[transition-delay]
div.block {transition: backgrond-color 0.3s linear;}

Объектная модель:
document.getElementById("elementID").style.transition Пример

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

Трансформации
(изменение размера, поворот, сдвиг и искажение элемента)

• matrix(a, c, b, d, tx, ty) – Одновременное применение нескольких трансформаций.

  Значение	Действие
  a	Изменение размера по горизонтали, a > 1 – увеличение, 0 < a < 1 – уменьшение.
  c	Искажение стороны элемента по оси Y, c > 0 – вверх, c < 0 – вниз.
  b	Искажение стороны элемента по оси X, b > 0 – влево, b < 0 – вправо.
  d	Изменение размера по вертикали, d > 1 – увеличение, 0 < d < 1 – уменьшение.
  tx	Сдвиг элемент по оси X, tx > 0 – влево, tx < 0 – вправо.
  ty	Сдвиг элемент по оси Y, ty > 0 – вверх, ty < 0 – вниз.

  
  Пример
  
  
• rotate(угол) – Поворот элемента на заданное количество градусов (deg), угол < 0 – против часовой стрелки, угол > 0 – по часовой стрелке.
  Пример
  
  
• scale(x,y) – Изменение размера элемента,
  x – изменение ширины элемента, y – изменение высоты элемента,
  x,y > 1 – увеличение, 0 < x,y < 1 – уменьшение.
  x,y < 0 – зеркальное отображение элемента.
• scaleX(x) – Изменение ширины элемента, x > 1 – увеличение, 0 < x < 1 – уменьшение, x < 0 – зеркальное отображение элемента.
• scaleY(y) – Изменение высоты элемента, y > 1 – увеличение, 0 < y < 1 – уменьшение, y < 0 – зеркальное отображение элемента.
  Пример
  
  
• skew(x-угол,y-угол) – Искажение по горизонтали на x-угол, искажение по вертикали на y-угол, x-угол > 0 – искажение влево, x-угол < 0 – искажение вправо, y-угол > 0 – искажение вверх, y-угол < 0 – искажение вниз.
• skewX(x-угол) – Искажение по горизонтали на заданный угол, x-угол > 0 – искажение влево, x-угол < 0 – искажение вправо.
• skewY(y-угол) – Искажение по вертикали на заданный угол, y-угол > 0 – искажение вверх, y-угол < 0 – искажение вниз.
  Пример
  
  
• translate(tx,ty) – Сдвиг по горизонтали на tx, сдвиг по вертикали на ty, tx > 0 – сдвиг вправо, tx < 0 – сдвиг влево, ty > 0 – сдвиг вниз, ty < 0 – сдвиг вверх.
• translateX(tx) – Сдвиг по горизонтали на tx, tx > 0 – сдвиг вправо, tx < 0 – сдвиг влево.
• translateY(ty) – Сдвиг по вертикали на ty, ty > 0 – сдвиг вниз, ty < 0 – сдвиг вверх.
  Пример
  
  

Объектная модель:
document.getElementById("elementID").style.transform

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

По умолчанию трансформация происходит относительно центра элемента. Пример

Объектная модель:
document.getElementById("elementID").style.transformOrigin

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

Анимация
(автоматически повторяющиеся ключевые кадры с плавным переходом)

Содержит имя анимации и устанавливает ключевые кадры, которые создаются с помощью ключевых слов from (0%) и to (100%) или с помощью любого числа процентных пунктов.

@keyframes cloud { from { right: -100%; top: -50%; } to { right: 100%; top: 0; } }

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

Имя анимации. Текстовая строка, которая должна начинаться с латинской буквы или подчёркивания (_), может содержать также цифры от 0 до 9 и дефис (-).

{animation-name:cloud}

Объектная модель:
document.getElementById("elementID").style.animationName

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

Устанавливает продолжительность анимации в секундах или миллисекундах.

{animation-duration:0.3s;}
или
{animation-duration:300ms;}

Объектная модель:
document.getElementById("elementID").style.animationDuration

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

Устанавливает временную функцию изменения скорости перехода.
Возможные значения:

• ease – Анимация начинается медленно, резко ускоряется, а затем постепенно замедляется к концу (по умолчанию).
• ease-in – Анимация начинается медленно, ускоряется к концу.
• ease-out – Анимация начинается быстро, замедляется к концу.
• ease-in-out – Анимация начинается медленно, постепенно ускоряется, а затем постепенно замедляется к концу.
• linear – Анимация начинается и заканчивается с одинаковой скоростью.
• cubic-bezier – Скорость анимации задается в виде кривой Безье.
• steps(количество шагов,start|end) – Пошаговая анимация. Второй параметр указывает момент начала анимации:

  Параметр	Действие
  start	анимация начинается в начале каждого шага
  end	анимация начинается в конце каждого шага с задержкой

Объектная модель:
document.getElementById("elementID").style.animationTimingFunction

Поддержка animation-timing-function браузерами

Устанавливает задержку анимации в секундах или миллисекундах.

{animation-delay:0.3s;}
или
{animation-delay:300ms;}

Значание по умолчаню – 0s (без задержки).

Объектная модель:
document.getElementById("elementID").style.animationDelay

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

Устанавливает число повторов анимации.
Возможные значения:

• n – Положительное число повторов анимации. Если n = 0.5, то анимация пройдет половину своего цикла.
• infinite – Бесконечное число повторов анимации.

Объектная модель:
document.getElementById("elementID").style.animationIterationCount

Поддержка animation-iteration-count браузерами

Устанавливает направление анимации.
Возможные значения:

• normal – Анимация идет с начала до конца, затем возвращается к исходному состоянию (по умолчанию).
• alternate – Анимация идет с начала до конца, затем в обратном направлении.
• reverse – Анимация идет с конца до начала, затем возвращается к исходному состоянию.
• alternate-reverse – Анимация идёт с конца до начала, затем в обратном направлении.

Объектная модель:
document.getElementById("elementID").style.animationDirection

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

Устанавливает проигрывать или остановить анимацию.
Возможные значения:

• runing – Проигрывать анимацию (по умолчанию).
• paused – Остановить анимацию.

Объектная модель:
document.getElementById("elementID").style.animationPlayState

Поддержка animation-play-state браузерами

Устанавливает, какие стили применяются к элементу, когда анимация не проигрывается (до начала, после завершения, при остановке).
Возможные значения:

• forwards – По окончанию анимации к элементу применяется стиль последнего ключевого кадра.
• backwards – На протяжении времени, заданного animation-delay, к элементу применяется стиль первого ключевого кадра.
• both – К элементу применяется и правило forwards, и правило backwards.

Объектная модель:
document.getElementById("elementID").style.animationFillMode

Поддержка animation-fill-mode браузерами

Устанавливает сразу несколько параметров анимации.
animation-name || animation-duration || [animation-timing-function] || [animation-delay]|| [animation-iteration-count] || [animation-direction] || [animation-fill-mode] || [animation-play-state]

{animation: cloud 15s linear infinite;}

Объектная модель:
document.getElementById("elementID").style.animation

Пример

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