-
Notifications
You must be signed in to change notification settings - Fork 0
/
_animation.scss
54 lines (53 loc) · 1.04 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
///
/// Generates keyframe animations.
///
/// @param {String} $keyframe-name
///
/// @example
/// @include x-keyframes(jump) {
/// from { top: 0; }
/// to { top: -10px; }
/// }
///
@mixin z-keyframes($keyframe-name) {
@-webkit-keyframes #{$keyframe-name} {
@content;
}
@-moz-keyframes #{$keyframe-name} {
@content;
}
@-ms-keyframes #{$keyframe-name} {
@content;
}
@-o-keyframes #{$keyframe-name} {
@content;
}
@keyframes #{$keyframe-name} {
@content;
}
}
///
/// Add animation to element.
///
/// @link https://www.w3schools.com/cssref/css3_pr_animation.asp spec
///
/// @param {List} $values
///
/// @output
/// ```css
/// -webkit-animation: <values>;
/// animation: <values>;
/// ```
///
/// @example
/// .selector {
/// @include x-animation(jump 1s ease-out);
/// }
///
@mixin z-animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}