s

Единица s определяет время в секундах. Допустимо указывать дробные значения, к примеру, 0.5s или 3.2s.

В одной секунде 1000 миллисекунд, поэтому 1s = 1000ms.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>s</title> <style> .movingBall { position: relative; /* Относительное позиционирование */ } .movingBall::before { content: ''; /* Выводим линию */ position: absolute; /* Абсолютное позиционирование */ background: #ccc; /* Цвет линии */ top: 8px; /* Расстояние сверху */ height:4px; width:250px; /* Размеры линии */ } .movingBall::after { content: ''; /* Выводим окружность */ position: absolute; /* Абсолютное позиционирование */ background: #000; /* Цвет круга */ width:20px; height:20px; /* Размеры круга */ border-radius: 50%; /* Превращаем в круг */ animation: bounce 2.5s infinite alternate; /* Параметры анимации */ } @keyframes bounce { from { left: 0; } to { left: 230px; } } </style> </head> <body> <div class="movingBall"></div> </body> </html>

В данном примере выводится серая линия и чёрный круг, который бесконечно движется вдоль линии в течение 2,5 секунд.

Примечание

Некоторые старые браузеры не воспринимают нулевое значение времени без единиц. Для них 0 и 0s не являются равнозначными значениями.

Спецификация

Спецификация Статус
CSS Values and Units Module Level 4 Рабочий проект
CSS Values and Units Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация

Браузеры

9 12 4 11.5 3.1 4
2.1 4 12 3.2

В таблице браузеров применяются следующие обозначения.

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

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

См. также