можно сказать, что если в animation-duration указано значение 3s, то
при употреблении ТОЛЬКО 100%(или from), анимация начнется через целых
три секунды. Однако, этого не происходит (см. пример в вопросе)
100% обозначает финиш анимации, то есть to
,
from
это 0% - старт анимации
Ваш пример можно было бы написать в подробной форме и она будет аналогична вашей сокращенной записи:
.block_3 {
width: 50px;
height: 50px;
background: pink;
animation: block 3s infinite linear;
margin: 0 auto;
margin-top: 30px;
transform-origin: 60px 60px;
}
@keyframes block {
0% {
transform: rotate(0deg);}
100% {
transform: rotate(360deg);
}
}
<div class="block_3"></div>
Отложить начало анимации можно командой animation-delay:3s;
.block_3 {
width: 50px;
height: 50px;
background: pink;
animation: block 3s infinite linear;
animation-delay:3s;
margin: 0 auto;
margin-top: 30px;
transform-origin: 60px 60px;
}
@keyframes block {
0% {
transform: rotate(0deg);}
100% {
transform: rotate(360deg);
}
}
<div class="block_3"></div>
Или можно добавить задержку в сокращенную форму записи
animation: block 3s infinite 3s linear;
.block_3 {
width: 50px;
height: 50px;
background: pink;
animation: block 3s infinite 3s linear;
margin: 0 auto;
margin-top: 30px;
transform-origin: 60px 60px;
}
@keyframes block {
0% {
transform: rotate(0deg);}
100% {
transform: rotate(360deg);
}
}
<div class="block_3"></div>