Постепенно добавляя 15 se c ко времени в цикле CSS @each

Question

Я адаптирую скрипт CSS, который периодически выполняет задачу анимации, но вместо того, чтобы повторять сегмент кода 30 раз, я поместил его в al oop. В этом случае есть 30 <div></div> сегментов, и CSS выполняет анимацию для каждого:

@each $i from 1 through 30 

#dna div:nth-child(#{$i}) {
    animation-delay: -59.85s;
}
#dna div:nth-child(#{$i})::before {
    animation-delay: -59.85s;
}
#dna div:nth-child(#{$i})::after {
    animation-delay: -59.85s;
}


@-webkit-keyframes rotation {
    from {
        transform: rotateX(0deg);
    }
    to {
        transform: rotateX(359deg);
    }
}

Проблема в том, что мне нужно иметь возможность добавить 15 se c к -59.85 se c с каждым l oop. Я не уверен, с чего начать, так как я никогда не использовал CSS с такой емкостью.

Любая помощь будет оценена!

Answer 1

Вы можете делать свои циклы в s css файлах, например так:

$fade-delay: -59.85; // start value, adjust to get value of your choice in first loop
$fade-delay-seconds-to-add: 15; // seconds as pure number to add in each loop
$number-of-loops: 30;

@for $i from 1 through $number-of-loops {

    $fade-delay: $fade-delay + $fade-delay-seconds-to-add;

    #dna div:nth-child(#{$i}) {
        animation-delay: #{$fade-delay}s;
    }
    #dna div:nth-child(#{$i})::before {
        animation-delay: #{$fade-delay}s;
    }
    #dna div:nth-child(#{$i})::after {
        animation-delay: #{$fade-delay}s;
    }
}

Sass затем компилирует это в:

#dna div:first-child,
#dna div:first-child:after,
#dna div:first-child:before {
    -webkit-animation-delay:-44.85s;
    animation-delay:-44.85s
}

#dna div:nth-child(2),
#dna div:nth-child(2):after,
#dna div:nth-child(2):before {
    -webkit-animation-delay: -29.85s;
    animation-delay:-29.85s;
}

#dna div:nth-child(3),
#dna div:nth-child(3):after,
#dna div:nth-child(3):before {
    -webkit-animation-delay:-14.85s;
    animation-delay:-14.85s
}

/* ... and so on */

Answer 2

Я не знаком с переменными и т. Д. c в css, но я обнаружил, что calc() сможет вам помочь.

Попробуйте:

#dna div:nth-child(#{$i}) {
    animation-delay: calc(-59.85s + $i * 30);
}
#dna div:nth-child(#{$i})::before {
    animation-delay: calc(-59.85s + $i * 30);
}
#dna div:nth-child(#{$i})::after {
    animation-delay: calc(-59.85s + $i * 30);
}

Для получения более подробной информации о программировании css проверьте: этот источник .