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 секунди, анімація починається відразу ж після завантаження сторінки.