Как повторить анимацию ключевых кадров нескольких частей SVG?

Question

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

У меня есть несколько ключевых кадров, так как я анимирую разные части SVG и разные стили анимации.

- Я хочу повторить последовательность анимаций после того, как они все пройдут.

Это то, что у меня сейчас есть: https://codepen.io/megan24689/pen/NZyOdb?editors=1100 (пожалуйста, ознакомьтесь с анимацией, которая у меня есть)

CSS

    .swing-out-right-fwd-1 {
    -webkit-animation: swing-out-right-fwd 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 2s both;
            animation: swing-out-right-fwd 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 2s both;
}
    .swing-in-right-fwd-2 {
        -webkit-animation: swing-in-right-fwd 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3.3s both;
                animation: swing-in-right-fwd 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3.3s both;
    }
    .swing-out-bottom-bck-3 {
        -webkit-animation: swing-out-bottom-bck 0.65s cubic-bezier(0.600, -0.280, 0.735, 0.045) 4.6s both;
                animation: swing-out-bottom-bck 0.65s cubic-bezier(0.600, -0.280, 0.735, 0.045) 4.6s both;
    }
    .swing-in-bottom-bck-4 {
        -webkit-animation: swing-in-bottom-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 6s both;
                animation: swing-in-bottom-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 6s both;
    }
    .swing-in-top-fwd-5 {
        -webkit-animation: swing-in-top-fwd 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) 8s both;
                animation: swing-in-top-fwd 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) 8s both;
    }
    .swing-out-left-fwd-6 {
        -webkit-animation: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) 7s both;
                animation: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) 7s both;
    }
    .swing-out-top-bck-7 {
        -webkit-animation: swing-out-top-bck 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 8.3s both;
                animation: swing-out-top-bck 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 8.3s both;
    }
    .swing-in-top-bck-8 {
        -webkit-animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 9.7s both;
                animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 9.7s both;
    }

    @-webkit-keyframes swing-out-right-fwd {
      0% {
        -webkit-transform: rotateY(0);
                transform: rotateY(0);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateY(70deg);
                transform: rotateY(70deg);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 0;
      }
    }
    @keyframes swing-out-right-fwd {
      0% {
        -webkit-transform: rotateY(0);
                transform: rotateY(0);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateY(70deg);
                transform: rotateY(70deg);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 0;
      }
    }
    @-webkit-keyframes swing-in-right-fwd {
      0% {
        -webkit-transform: rotateY(-100deg);
                transform: rotateY(-100deg);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateY(0);
                transform: rotateY(0);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 1;
      }
    }
    @keyframes swing-in-right-fwd {
      0% {
        -webkit-transform: rotateY(-100deg);
                transform: rotateY(-100deg);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateY(0);
                transform: rotateY(0);
        -webkit-transform-origin: right;
                transform-origin: right;
        opacity: 1;
      }
    }
    @-webkit-keyframes swing-out-bottom-bck {
      0% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateX(100deg);
                transform: rotateX(100deg);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 0;
      }
    }
    @keyframes swing-out-bottom-bck {
      0% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateX(100deg);
                transform: rotateX(100deg);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 0;
      }
    }

    @-webkit-keyframes swing-in-bottom-bck {
      0% {
        -webkit-transform: rotateX(-70deg);
                transform: rotateX(-70deg);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 1;
      }
    }
    @keyframes swing-in-bottom-bck {
      0% {
        -webkit-transform: rotateX(-70deg);
                transform: rotateX(-70deg);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
        -webkit-transform-origin: bottom;
                transform-origin: bottom;
        opacity: 1;
      }
    }
    @-webkit-keyframes swing-in-top-fwd {
      0% {
        -webkit-transform: rotateX(-100deg);
                transform: rotateX(-100deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 1;
      }
    }
    @keyframes swing-in-top-fwd {
      0% {
        -webkit-transform: rotateX(-100deg);
                transform: rotateX(-100deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 1;
      }
    }
    @-webkit-keyframes swing-out-left-fwd {
      0% {
        -webkit-transform: rotateY(0);
                transform: rotateY(0);
        -webkit-transform-origin: left;
                transform-origin: left;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateY(-70deg);
                transform: rotateY(-70deg);
        -webkit-transform-origin: left;
                transform-origin: left;
        opacity: 0;
      }
    }
    @keyframes swing-out-left-fwd {
      0% {
        -webkit-transform: rotateY(0);
                transform: rotateY(0);
        -webkit-transform-origin: left;
                transform-origin: left;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateY(-70deg);
                transform: rotateY(-70deg);
        -webkit-transform-origin: left;
                transform-origin: left;
        opacity: 0;
      }
    }
    @-webkit-keyframes swing-out-top-bck {
      0% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateX(-100deg);
                transform: rotateX(-100deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0;
      }
    }
    @keyframes swing-out-top-bck {
      0% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateX(-100deg);
                transform: rotateX(-100deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0;
      }
    }
    @-webkit-keyframes swing-in-top-bck {
      0% {
        -webkit-transform: rotateX(70deg);
                transform: rotateX(70deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 1;
      }
    }
    @keyframes swing-in-top-bck {
      0% {
        -webkit-transform: rotateX(70deg);
                transform: rotateX(70deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0;
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 1;
      }
    }

Answer 1

Вы можете сделать все анимации одинаковыми по длительности и контролировать их время, используя проценты, а не задержку анимации. Таким образом, используя бесконечность, они будут повторяться одинаково.

Возможный способ сделать это легко - использовать либо JavaScript, либо препроцессор. Вот пример использования Sass (SCSS). Это также должно позволить вам легко настроить значения вашей анимации, чтобы получить точный результат, который вы хотите. В этом примере каждая группа значений в $timings представляет в следующем порядке: время начала, продолжительность, функция синхронизации, начало преобразования, начальный угол и конечный угол.

$duration: 10.5s;
$bezier1: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$bezier2: cubic-bezier(0.175,  0.885, 0.320, 1.275);
$timings:
    2.0s .75s $bezier1 right     0deg   70deg,
    3.3s .60s $bezier2 right  -100deg    0deg,
    4.6s .65s $bezier1 bottom    0deg  100deg,
    6.0s .60s $bezier2 bottom  -70deg    0deg,
    7.0s .55s $bezier1 left      0deg  -70deg,
    8.0s .70s $bezier2 top    -100deg    0deg,
    8.3s .75s $bezier1 top       0deg -100deg,
    9.7s .60s $bezier2 top      70deg    0deg;

@for $i from 1 through length($timings) {
    $data: nth($timings, $i);
    $from: 100% * nth($data, 1) / $duration;
    $to: 100% * (nth($data, 1) + nth($data, 2)) / $duration;
    $transform: rotate#{if(nth($data, 4) == left or nth($data, 4) == right, Y, X)};
    @keyframes anim-#{$i} {
        from, #{$from} {
            transform: #{$transform}#{'('}nth($data, 5)#{')'};
            opacity: if(nth($data, 5) == 0deg, 1, 0);
        }
        #{$to}, to {
            transform: #{$transform}#{'('}nth($data, 6)#{')'};
            opacity: if(nth($data, 6) == 0deg, 1, 0);
        }
    }
    .anim-#{$i} {
        transform-origin: nth($data, 4);
        animation: anim-#{$i} $duration nth($data, 3) infinite alternate;
    }
}

Вилка Codepen

Примечание: для улучшения читабельности я также включил prefixfree и избавился от префиксных версий.

Если вы не хотите использовать препроцессор на своей стороне, вы можете просто получить сгенерированный CSS непосредственно из Codepen («Просмотреть скомпилированный CSS» в раскрывающемся списке области CSS) или другого онлайн-инструмента.