В данном примере задаётся время вращения элемента 2 секунды, анимация начинается сразу же после загрузки страницы.
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.
Свойство: <время>
Пример
<!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 секунды, анимация начинается сразу же после загрузки страницы.
Сайт