Час у CSS — одиниці s і ms для анімацій і переходів
Задає час в секундах або мілісекундах. Значення складається з цілого або дробового числа, а потім один з одиниць виміру часу, перерахованих нижче:
- s - для секунд.
- ms - для мілісекунд.
Як і в css довжинаж, прогалина між числом та одиницею виміру неприпустима.
автор: NagarD
Загальний опис
автор: NagarD
- Порада
-
Деякі люди для задання часу використовують
автор: NagarD0. Але це не спрацює й браузен не спрайме її. Одиниці виміру часу обов'язково мають бити встановлені -0sабо0ms - Нотатка
-
Пам'ятайте, що 1s = 1000ms.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| time | 11.0 | 4.0 | 3.2 | 10.5 | 12.0 | 9.0 |
| Переглядач |  |
 |
 |
|---|---|---|---|
| time | 2.1 | 4.0 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Тип <time> — число з одиницею s або ms: у скороченні animation тут 2s — тривалість оберту, 0s — затримка старту.
HTML
<div class="spin">2s</div>CSS
.spin {
width: 80px;
height: 80px;
display: grid;
place-items: center;
background: #0172ad;
color: #fff;
animation: spin 2s linear 0s infinite normal;
}
@keyframes spin {
to { transform: rotate(360deg); }
}Перший ряд — та сама анімація з різними записами часу: 1s, 1000ms, 1 s із пробілом і 1 без одиниці. Два останні браузер відкидає, тому квадрати не рухаються. Другий ряд — три однакові анімації з різними від'ємними затримками: кожна стартує з іншої фази, хоч код у них один.
HTML
<h4 class="cap">1. Записи часу: два працюють, два ні</h4>
<div class="row">
<div class="item"><span class="dot d-s"></span><code>2s</code></div>
<div class="item"><span class="dot d-ms"></span><code>2000ms</code></div>
<div class="item"><span class="dot d-space"></span><code>2 s</code> — пробіл</div>
<div class="item"><span class="dot d-bare"></span><code>2</code> — без одиниці</div>
</div>
<p class="note">Два праві кружечки стоять: значення недійсні, тому тривалість
лишилась типовою — нуль.</p>
<h4 class="cap">2. Від'ємна затримка зсуває фазу</h4>
<div class="row">
<div class="item"><span class="dot ph ph0"></span><code>0s</code></div>
<div class="item"><span class="dot ph ph1"></span><code>-1s</code></div>
<div class="item"><span class="dot ph ph2"></span><code>-2s</code></div>
</div>
<p class="note">Код анімації один і той самий, різниця лише в
<code>animation-delay</code>. Від'ємне значення означає «вважай, що вона
вже стільки часу триває».</p>
<h4 class="cap">3. У скороченні перше число — тривалість, друге — затримка</h4>
<div class="row">
<div class="item"><span class="bar b1"></span><code>transition: 1s 0s</code></div>
<div class="item"><span class="bar b2"></span><code>transition: 0.2s 1s</code></div>
</div>
<p class="note">Наведіть курсор на смужки: перша поїде одразу й повільно,
друга — швидко, але аж за секунду.</p>CSS
@keyframes ruh {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
.row {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
max-width: 620px;
margin-bottom: 4px;
}
.item {
display: flex;
align-items: center;
gap: 10px;
width: 260px;
padding: 8px 12px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
font-size: .85rem;
}
.dot {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2f6fd0;
animation-name: ruh;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.d-s {
animation-duration: 2s;
}
.d-ms {
animation-duration: 2000ms;
}
.d-space {
animation-duration: 2 s;
}
.d-bare {
animation-duration: 2;
}
.ph {
background: #3a9a4f;
animation-duration: 3s;
}
.ph1 {
animation-delay: -1s;
}
.ph2 {
animation-delay: -2s;
}
.bar {
display: block;
width: 26px;
height: 18px;
border-radius: 4px;
background: #d1a04a;
}
.b1 {
transition: transform 1s 0s;
}
.b2 {
transition: transform .2s 1s;
}
.item:hover .bar {
transform: translateX(90px);
}
.cap {
margin: 24px 0 8px;
font-size: 1rem;
color: #5a6472;
}
.note {
max-width: 620px;
margin: 4px 0 0;
color: #5a6472;
font-size: .85em;
}
code {
background: #eef4ff;
border-radius: 3px;
padding: 0 4px;
}Демонстація роботи значення.
HTML
<div class="loading">
<div class="spin"></div>
<p>Відбувається завантаження сторінки...</p>
</div>CSS
.loading {
font-size: 19px;
width: 240px;
margin: auto;
padding: 20px 0 10px;
background: #800080;
color: #fff;
text-align: center;
}
.spin {
display: inline-block;
width: 30px;
height: 30px;
border: 10px solid #808080;
border-right: 10px solid #E6E6FA;
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); } }Коментарі
Коментарів ще немає — будьте першим!