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 |