-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
_animation.scss
122 lines (97 loc) · 4.72 KB
/
_animation.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
@import "compass/support";
// The prefixed support threshold for animation.
// Defaults to the $graceful-usage-threshold.
$animation-support-threshold: $graceful-usage-threshold !default;
// Name of any animation as a string.
$default-animation-name : null !default;
// Duration of the entire animation in seconds.
$default-animation-duration : null !default;
// Delay for start of animation in seconds.
$default-animation-delay : null !default;
// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
$default-animation-timing-function : null !default;
// The number of times an animation cycle is played. [infinite | $number]
$default-animation-iteration-count : null !default;
// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
$default-animation-direction : null !default;
// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
$default-animation-fill-mode : null !default;
// Whether the animation is running or paused. [running | paused]
$default-animation-play-state : null !default;
// Create a named animation sequence that can be applied to elements later.
//
// $name - The name of your animation.
// @content - The keyframes of the animation.
@mixin keyframes($name, $deprecated-prefixes...) {
$warned: warn-about-useless-prefix-arguments($deprecated-prefixes...);
@include with-each-prefix(css-animation, $animation-support-threshold) {
// It would be nice if we could dynamically construct directive names.
@if $current-prefix == -moz { @-moz-keyframes #{$name} { @content; } }
@if $current-prefix == -webkit { @-webkit-keyframes #{$name} { @content; } }
@if $current-prefix == -o { @-o-keyframes #{$name} { @content; } }
@if $current-prefix == -ms { @-ms-keyframes #{$name} { @content; } }
@if $current-prefix == null { @keyframes #{$name} { @content; } }
}
}
// @private
@mixin animation-properties($properties) {
@include prefixed-properties(css-animation, $animation-support-threshold, $properties);
}
// Apply any number of animation names.
@mixin animation-name($name...) {
$name: set-arglist-default($name, $default-animation-name);
@include animation-properties((animation-name: $name));
}
// Apply any number of animation durations.
@mixin animation-duration($duration...) {
$duration: set-arglist-default($duration, $default-animation-duration);
@include animation-properties((animation-duration: $duration));
}
// Apply any number of animation delays.
@mixin animation-delay($delay...) {
$delay: set-arglist-default($delay, $default-animation-delay);
@include animation-properties((animation-delay: $delay));
}
// Apply any number of animation timing functions.
@mixin animation-timing-function($function...) {
$function: set-arglist-default($function, $default-animation-timing-function);
@include animation-properties((animation-timing-function: $function));
}
// Apply any number of animation iteration counts.
@mixin animation-iteration-count($count...) {
$count: set-arglist-default($count, $default-animation-iteration-count);
@include animation-properties((animation-iteration-count: $count));
}
// Apply any number of animation directions.
@mixin animation-direction($direction...) {
$direction: set-arglist-default($direction, $default-animation-direction);
@include animation-properties((animation-direction: $direction));
}
// Apply any number of animation fill modes.
@mixin animation-fill-mode($mode...) {
$mode: set-arglist-default($mode, $default-animation-fill-mode);
@include animation-properties((animation-fill-mode: $mode));
}
// Apply any number of animation play states.
@mixin animation-play-state($state...) {
$state: set-arglist-default($state, $default-animation-play-state);
@include animation-properties((animation-play-state: $state));
}
// @private
@function default-animation() {
@return compact($default-animation-name
$default-animation-duration
$default-animation-timing-function
$default-animation-delay
$default-animation-iteration-count
$default-animation-direction
$default-animation-fill-mode
$default-animation-play-state);
}
// Shortcut to apply any number of animations to an element, with all the settings.
//
// $animation... : Name and settings. [<values> | default]
@mixin animation($animation...) {
$animation: if(length($animation) > 0, $animation, default-animation());
@include animation-properties((animation: $animation));
}