@import "settings.animations"; @mixin menu-keyframes { @keyframes menu { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } } @mixin menu { animation-name: menu; animation-duration: $animation-duration; animation-fill-mode: both; animation-timing-function: $animation-easing; } @mixin menu--top { transform-origin: top; } @mixin menu--bottom { transform-origin: bottom; } @mixin menu--left { transform-origin: left; } @mixin menu--right { transform-origin: right; } @mixin menu--slow { animation-duration: $animation-duration-slow; } @mixin menu--fast { animation-duration: $animation-duration-fast; }