Время
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
9.0+
1.0+
10.5+
3.2+
4.0+
1.0+
1.0+
Описание
Задаёт время в секундах или миллисекундах. Значение состоит из целого или дробного числа, за которым сразу же следует символ s для секунд или ms для миллисекунд. Пробел после числа недопустим. Для преобразования единиц помните, что 1s = 1000ms.
При нулевом значении единица времени не опускается и также должна быть добавлена. Всегда пишите 0s или 0ms вместо простого 0.
Синтаксис
Свойство: <время>Пример
HTML5CSS3IE 10CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка...</title>
<style>
.loading {
width: 240px;
margin: auto;
padding: 20px 0 10px;
background: #333;
color: #fff;
text-align: center;
}
.spin {
display: inline-block;
width: 30px; height: 30px;
border: 10px solid #ccc;
border-right: 10px solid #000;
border-radius: 30px;
/* Анимация */
-webkit-animation: spin 2s linear 0s infinite normal;
-moz-animation: spin 2s linear 0s infinite normal;
-o-animation: spin 2s linear 0s infinite normal;
animation: spin 2s linear 0s infinite normal;
}
/* Задаём вращение */
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); } }
@-o-keyframes spin { from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); } }
@keyframes spin { from { transform: rotate(0deg); }
to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div class="loading">
<div class="spin"></div>
<p>Загружается...</p>
</div>
</body>
</html>В данном примере задаётся время вращения элемента 2 секунды, анимация начинается сразу же после загрузки страницы.