Customs - Tombek/animate.scss GitHub Wiki

Custom

Copy and paste default_animation.scss, rename it and import it into source/_custom/_import.scss file.

Here is default_animation.scss content:

@mixin default_name( $animation: $default-animation ){
    @if($animation == '' or $animation == 'default'){ $animation: $default-animation }
    $animation-name: "default_name";
    $animation-name: remove_chars($animation-name, ("." ","), "_");

    @include create-animation( $animation-name, $animation ){
        @-webkit-keyframes #{$animation-name}{
            // **
            // * Insert -webkit-keyframes here
            // */
        }
        @keyframes #{$animation-name}{
            // **
            // * Insert keyframes here
            // */
        }
    }
}

Just change default_name for the name of your custom animation and create your animation inside @-webkit-keyframes and @keyframes. That's it.

Custom parameters

If you add custom parameters to your mixin, add them after $animation-name: "default_name" using - as separator like this :

$animation-name: "default_name" + "-" + param1 [+ "-" + param2 + ...];

This allow animate.scss to know if you already have used an animation, even if it's a custom animation, and not create another keyframe for it if it already exit.