| 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.
Синтаксис
Властивість: <час>
Приклад
HTML5 CSS3 IE 10 Cr Op Sa Fx
<!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 секунди, анімація починається відразу ж після завантаження сторінки.