Зациклить CSS-анимацию с несколькими ключевыми кадрами ⇐ CSS

[Anonymous]

Я пытаюсь создать экран загрузки анимации, но не могу зациклить несколько ключевых кадров. Я узнал, что могу сделать это только с помощью JavaScript, но у меня плохо получается писать сценарии. Как мне это сделать?

Кроме того, я не могу сделать это одним ключевым кадром (сдвиньте стрелку 1, затем 2, затем 3 выдвинется и выдвинется стрелка 3 сначала выдвинется, затем 2, затем 3)

Код: Выделить всё

let index = 1;

function repeatAnimation() {
const arrow = document.querySelector('.arrow');

if (index === 1) {
arrow.style.animationName = 'slideIn';
index = 0;
} else {
arrow.style.animationName = 'slideOut';
index = 1;
}

}

setInterval(repeatAnimation, 2000);

Код: Выделить всё

html,
body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f4f4f4;
color: #EE4036;
font-family: Arial, sans-serif;
font-weight: bolder;
font-size: xx-large;
}

.arrows {
display: flex;
justify-content: start;
align-items: start;
padding-left: 6px;
gap: 3px;
}

/* Common styles for arrows */

.arrow {
position: relative;
width: 10px;
height: 10px;
background: #EE4036;
border-top-right-radius: 30%;
transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
rotate: 90deg;
opacity: 0;
animation: slideInOut 6s infinite;
}

.arrow::before,
.arrow::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background: inherit;
border-top-right-radius: inherit;
}

.arrow::before {
background: #EE4036;
transform: rotate(-135deg) skewX(-45deg) scale( 1.414, .707) translateY(-50%);
}

.arrow::after {
background: #EE4036;
transform: rotate(135deg) skewY(-45deg) scale( .707, 1.414) translateX(50%);
}

@keyframes slideIn {
from {
transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
opacity: 0;
}
to {
transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
opacity: 1;
}
}

@keyframes slideOut {
from {
transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
opacity: 1;
left: 10px;
}
to {
transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
opacity: 0;
left: 10px;
}
}

.arrow {
opacity: 0;
animation: slideIn 0.5s forwards, slideOut 0.5s forwards, repeatSequence 2s infinite;
}

.arrow_1 {
animation-delay: 0s, 2.5s;
}

.arrow_2 {
animation-delay: 0.5s, 2s;
}

.arrow_3 {
animation-delay: 1s, 1.5s;
}

Код: Выделить всё

Loading

Я очень плохо разбираюсь в скриптах, но думаю, вот как мне следует это сделать, но работает только с первой стрелкой

Подробнее здесь: https://stackoverflow.com/questions/787 ... e-keyframe