// .animated and .animated.hinge classes for external use .animated +animation(1s ease both) .animated.hinge +animation(2s ease both) // Animations list $animations: flash, shake, bounce, tada, swing, wobble, wiggle, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, lightSpeedIn, lightSpeedOut, hinge, rollIn, rollOut // Animations that require backface-visibility $backface: flip, flipInX, flipOutX, flipInY, flipOutY // Creation of the different classes @each $anim in $animations .#{$anim} @if index($backface, $anim) +backface-visibility(visible) @if $anim == "swing" +transform-origin(top, center) +animation-name($anim)