БЛОГ НА HUSL


Вызов анимации несколько раз в css @animation

Автор вопроса: StZD

Такой вопрос, есть такая разметка:

<div class="line"></div>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="line7"></div>
<div class="line8"></div>
<div class="line9"></div>
<div class="line10"></div>
<div class="line11"></div>
<div class="line12"></div>
<div class="line13"></div>
<div class="line14"></div>
<div class="line15"></div>

И вот такой css:

.line {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
}
@keyframes line {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.line1 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line1 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.1s;
}
@keyframes line1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line2 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line2 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.2s;
}
@keyframes line2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line3 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line3 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.3s;
}
@keyframes line3 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line4 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line4 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.4s;
}
@keyframes line4 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line5 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line5 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.5s;
}
@keyframes line5 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line6 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line6 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.6s;
}
@keyframes line6 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line7 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line7 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.7s;
}
@keyframes line7 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line7 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line7 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.7s;
}
@keyframes line7 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line8 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line8 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.8s;
}
@keyframes line8 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line9 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line9 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 0.9s;
}
@keyframes line9 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line10 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line10 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 1s;
}
@keyframes line10 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line11 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line11 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 1.1s;
}
@keyframes line11 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line12 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line12 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 1.2s;
}
@keyframes line12 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line13 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line13 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 1.3s;
}
@keyframes line13 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line14 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line14 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 1.4s;
}
@keyframes line14 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.line15 {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line15 infinite linear;
    transform-origin: 448px 32px; /* 14 раз */
    top: calc(50% - 32px);
    left: calc(50% - 448px);
    animation-delay: 1.5s;
}
@keyframes line15 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Вся проблема состоит в том, что приходится создавать 15 линий и запускать их с задержкой, весь код css занимает слишком много места.
Так вот, вопрос состоит в чем, есть и возможность повторения одной и той же анимации с задержкой (не что-бы она начиналась после окончания анимации), а именно где-то через 0,2 секунды после начала анимации, запускалась по новой, но при этом старая еще дорабатывала


Источник

Ответы (1 шт):

Автор решения: rusgeli

Ну, как минимум, можно вынести все общее в отдельные правила, и код уже в разы сократится. При особом желании можно еще старт анимации сделать через js/jQuery и все индивидуальные правила тоже уйдут

.line {
    width: 2em;
    height: 0.3em;
    background: #ffffff;
    position: absolute;
    animation: 15s line infinite linear;
    transform-origin: 448px 32px;
    top: calc(50% - 32px);
    left: calc(50% - 448px);
}
@keyframes line {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.line1 {
    animation-delay: 0.1s;
}
.line2 {
    animation-delay: 0.2s;
}
.line3 {
    animation-delay: 0.3s;
}
.line4 {
    animation-delay: 0.4s;
}
.line5 {
    animation-delay: 0.5s;
}
.line6 {
    animation-delay: 0.6s;
}
.line7 {
    animation-delay: 0.7s;
}
.line8 {
    animation-delay: 0.8s;
}
.line9 {
    animation-delay: 0.9s;
}
.line10 {
    animation-delay: 1s;
}
.line11 {
    animation-delay: 1.1s;
}
.line12 {
    animation-delay: 1.2s;
}
.line13 {
    animation-delay: 1.3s;
}
.line14 {
    animation-delay: 1.4s;
}
.line15 {
    animation-delay: 1.5s;
}
<div class="line"></div>
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="line line7"></div>
<div class="line line8"></div>
<div class="line line9"></div>
<div class="line line10"></div>
<div class="line line11"></div>
<div class="line line12"></div>
<div class="line line13"></div>
<div class="line line14"></div>
<div class="line line15"></div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.