un big merci pour ce gist très util pour plusieurs de mes projets
thank!

Thanks for the SCSS version! Definitely helped alot!

Thanks for this painkiller ☺️

Thank you!

Thanks for the SCSS version. Saved me a lot of time.

Careful if you have any transform attributes in your animation, they need to be -webkit-transform in the webkit version.

I've gone for the following (need separate ones hardcoded for the number of steps in your animation):

@mixin keyframes-transform-3($name, $transform1, $transform2, $transform3) {
    @-webkit-keyframes #{$name} {
        0% { -webkit-transform: $transform1; }
        50% { -webkit-transform: $transform2; }
        100% { -webkit-transform: $transform3; }
    }
    @keyframes #{$name} {
        0% { transform: $transform1; }
        50% { transform: $transform2; }
        100% { transform: $transform3; }
    }
}

Thank you

Thanks 🍺

Thanks! Very helpful!

Thanks for your insightful code!
I needed a same default animation with a dynamic color (depending of a status).
Here is my adaptation of your scss schema:

@mixin animateBox($name, $color) { animation: #{$name} 1s infinite; @keyframes #{$name} { 50% { border-color: $color; } } }

Using:
.is-open{ @include animateBox(open, var(--color)); }

Thank you @meninomiel I needed that.