/// Creates a spinning animation. /// @param {Keyword} $direction [cw] - Direction to spin. Should be ‘cw` (clockwise) or `ccw` (counterclockwise). /// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit. /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. @function spin(
$state: in, $direction: cw, $amount: 1turn
) {
$start: 0; $end: 0; @if $state == in { $start: if($direction == ccw, $amount, $amount * -1); $end: 0; } @else { $start: 0; $end: if($direction == ccw, $amount * -1, $amount); } $keyframes: ( name: 'spin-#{$direction}-#{$amount}', 0: (transform: rotate($start)), 100: (transform: rotate($end)), ); @return $keyframes;
}