How can I loop the keyframe animation across various elements of an SVG file simultaneously?

Question

How can I loop the keyframe animation across various elements of an SVG file simultaneously?

After creating an animation using CSS and SVG, I am experiencing different parts of it animating in and out. My goal is to have the animation start from the top once it's finished.

There are multiple keyframes involved since I'm animating various parts of the SVG with different styles of animation.

-- I want to repeat the sequence of animations after they've all completed.

This is what I currently have: Check out the animation here

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;
}
...
@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;
  }
}

javascript jquery css svg css-animations

Answer 1

Answer №1

To ensure consistency in your animations, consider making all of them the same duration and controlling their timings using percentages instead of animation-delay. By doing this, the infinite property will repeat all animations in a uniform manner.

An easy way to achieve this is by using either JavaScript or a preprocessor like Sass (SCSS). Below is an example using Sass that allows for easy customization of animation values to achieve precise results. Each set of values in $timings includes start time, duration, timing function, transform origin, start angle, and final angle in order.

$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;
    }
}

View Codepen fork

For those who prefer not to use a preprocessor, you can simply copy the generated CSS from Codepen ("View Compiled CSS") or another online tool directly.

Answer 2

To ensure consistency in your animations, consider making all of them the same duration and controlling their timings using percentages instead of animation-delay. By doing this, the infinite property will repeat all animations in a uniform manner.

An easy way to achieve this is by using either JavaScript or a preprocessor like Sass (SCSS). Below is an example using Sass that allows for easy customization of animation values to achieve precise results. Each set of values in $timings includes start time, duration, timing function, transform origin, start angle, and final angle in order.

$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;
    }
}

View Codepen fork

For those who prefer not to use a preprocessor, you can simply copy the generated CSS from Codepen ("View Compiled CSS") or another online tool directly.

How can I loop the keyframe animation across various elements of an SVG file simultaneously?

Answer №1

Similar questions

"Enhancing HTML table rows using jQuery for a dynamic user experience

ES modules' `require()` functionality is not supported

A guide on simulating an emit event while testing a Vue child component using Jest

Encountered an error when trying to retrieve JSON string response in AJAX using jQuery due to inability to utilize the 'in' operator

Incorporating PHP generated content into Dart without using Ajax

Issue: Unable to locate the "es2015" preset in relation to the given directory

Express does not provide a 304 response code for static json files

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

"Exploring the process of integrating a controller into an external HTML file using AngularJS

Centering the logo using Material-UI's alignment feature

jQuery: Issue Encountered with POST Request when Offline (iOS & Chrome)

What is the best way to hand off slots to a descendant component in Vue 3?

Adding and removing attributes with Jquery upon clicking a button

How can I automatically disable certain checkboxes when a specific radio button is selected?

What is the process of sending a file from a remote URL as a GET response in a Node.js Express application?

Is it possible to retrieve the controller path for an AJAX request from within a partial view?

Utilizing reference memory to enable communication between two controllers

What's the best way to combine cells using HTML, CSS, and PHP?

Dragging additional events into FullCalendar is disabled after applying a filter to external events

Include a Vue component within another Vue component in a Laravel application using VueJs