Одиниця 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 не є рівнозначними значеннями.