animation 0.1.alpha.0 → 0.1.alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. data/README.mdown +62 -1
  2. data/stylesheets/{_animation.sass → _animation.scss} +1 -1
  3. data/stylesheets/animation/{animate.sass → animate.scss} +5 -5
  4. data/stylesheets/animation/animate/_attention-seekers.scss +126 -0
  5. data/stylesheets/animation/animate/{_rotating.sass → _bouncing.scss} +2 -2
  6. data/stylesheets/animation/animate/{_fading.sass → _fading.scss} +2 -2
  7. data/stylesheets/animation/animate/{_bouncing.sass → _rotating.scss} +2 -2
  8. data/stylesheets/animation/animate/_specials.scss +42 -0
  9. data/stylesheets/animation/animate/bouncing/_bouncing-entrances.scss +68 -0
  10. data/stylesheets/animation/animate/bouncing/_bouncing-exits.scss +60 -0
  11. data/stylesheets/animation/animate/fading/_fading-entrances.scss +86 -0
  12. data/stylesheets/animation/animate/fading/_fading-exits.scss +86 -0
  13. data/stylesheets/animation/animate/rotating/_rotating-entrances.scss +58 -0
  14. data/stylesheets/animation/animate/rotating/_rotating-exits.scss +58 -0
  15. data/stylesheets/animation/core.scss +115 -0
  16. data/stylesheets/animation/experimental.scss +22 -0
  17. metadata +24 -24
  18. data/stylesheets/animation/animate/_attention-seekers.sass +0 -120
  19. data/stylesheets/animation/animate/_specials.sass +0 -40
  20. data/stylesheets/animation/animate/bouncing/_bouncing-entrances.sass +0 -64
  21. data/stylesheets/animation/animate/bouncing/_bouncing-exits.sass +0 -56
  22. data/stylesheets/animation/animate/fading/_fading-entrances.sass +0 -78
  23. data/stylesheets/animation/animate/fading/_fading-exits.sass +0 -78
  24. data/stylesheets/animation/animate/rotating/_rotating-entrances.sass +0 -54
  25. data/stylesheets/animation/animate/rotating/_rotating-exits.sass +0 -54
  26. data/stylesheets/animation/core.sass +0 -83
@@ -0,0 +1,86 @@
1
+ // ---------------------------------------------------------------------------
2
+ @include keyframes(fadeOut) {
3
+ 0% {
4
+ opacity: 1; }
5
+ 100% {
6
+ opacity: 0; } }
7
+
8
+
9
+ // ---------------------------------------------------------------------------
10
+ @include keyframes(fadeOutUp) {
11
+ 0% {
12
+ @include translateY(0);
13
+ opacity: 1; }
14
+ 100% {
15
+ @include translateY(-20px);
16
+ opacity: 0; } }
17
+
18
+
19
+ // ---------------------------------------------------------------------------
20
+ @include keyframes(fadeOutDown) {
21
+ 0% {
22
+ @include translateY(0);
23
+ opacity: 1; }
24
+ 100% {
25
+ @include translateY(20px);
26
+ opacity: 0; } }
27
+
28
+
29
+ // ---------------------------------------------------------------------------
30
+ @include keyframes(fadeOutRight) {
31
+ 0% {
32
+ @include translateX(0);
33
+ opacity: 1; }
34
+ 100% {
35
+ @include translateX(20px);
36
+ opacity: 0; } }
37
+
38
+
39
+ // ---------------------------------------------------------------------------
40
+ @include keyframes(fadeOutLeft) {
41
+ 0% {
42
+ @include translateX(0);
43
+ opacity: 1; }
44
+ 100% {
45
+ @include translateX(-20px);
46
+ opacity: 0; } }
47
+
48
+
49
+ // ---------------------------------------------------------------------------
50
+ @include keyframes(fadeOutUpBig) {
51
+ 0% {
52
+ @include translateY(0);
53
+ opacity: 1; }
54
+ 100% {
55
+ @include translateY(-2000px);
56
+ opacity: 0; } }
57
+
58
+
59
+ // ---------------------------------------------------------------------------
60
+ @include keyframes(fadeOutDownBig) {
61
+ 0% {
62
+ opacity: 1;
63
+ @include translateY(0); }
64
+ 100% {
65
+ opacity: 0;
66
+ @include translateY(2000px); } }
67
+
68
+
69
+ // ---------------------------------------------------------------------------
70
+ @include keyframes(fadeOutRightBig) {
71
+ 0% {
72
+ opacity: 1;
73
+ @include translateX(0); }
74
+ 100% {
75
+ opacity: 0;
76
+ @include translateX(2000px); } }
77
+
78
+
79
+ // ---------------------------------------------------------------------------
80
+ @include keyframes(fadeOutLeftBig) {
81
+ 0% {
82
+ opacity: 1;
83
+ @include translateX(0); }
84
+ 100% {
85
+ opacity: 0;
86
+ @include translateX(-2000px); } }
@@ -0,0 +1,58 @@
1
+ // ---------------------------------------------------------------------------
2
+ @include keyframes(rotateIn) {
3
+ 0% {
4
+ @include transform-origin(center center);
5
+ @include rotate(-200deg);
6
+ opacity: 0; }
7
+ 100% {
8
+ @include transform-origin(center center);
9
+ @include rotate(0);
10
+ opacity: 1; } }
11
+
12
+
13
+ // ---------------------------------------------------------------------------
14
+ @include keyframes(rotateInDownLeft) {
15
+ 0% {
16
+ @include transform-origin(left bottom);
17
+ @include rotate(-90deg);
18
+ opacity: 0; }
19
+ 100% {
20
+ @include transform-origin(left bottom);
21
+ @include rotate(0);
22
+ opacity: 1; } }
23
+
24
+
25
+ // ---------------------------------------------------------------------------
26
+ @include keyframes(rotateInUpLeft) {
27
+ 0% {
28
+ @include transform-origin(left bottom);
29
+ @include rotate(90deg);
30
+ opacity: 0; }
31
+ 100% {
32
+ @include transform-origin(left bottom);
33
+ @include rotate(0);
34
+ opacity: 1; } }
35
+
36
+
37
+ // ---------------------------------------------------------------------------
38
+ @include keyframes(rotateInUpRight) {
39
+ 0% {
40
+ @include transform-origin(right bottom);
41
+ @include rotate(-90deg);
42
+ opacity: 0; }
43
+ 100% {
44
+ @include transform-origin(right bottom);
45
+ @include rotate(0);
46
+ opacity: 1; } }
47
+
48
+
49
+ // ---------------------------------------------------------------------------
50
+ @include keyframes(rotateInDownRight) {
51
+ 0% {
52
+ @include transform-origin(right bottom);
53
+ @include rotate(90deg);
54
+ opacity: 0; }
55
+ 100% {
56
+ @include transform-origin(right bottom);
57
+ @include rotate(0);
58
+ opacity: 1; } }
@@ -0,0 +1,58 @@
1
+ // ---------------------------------------------------------------------------
2
+ @include keyframes(rotateOut) {
3
+ 0% {
4
+ @include transform-origin(center center);
5
+ @include rotate(0);
6
+ opacity: 1; }
7
+ 100% {
8
+ @include transform-origin(center center);
9
+ @include rotate(200deg);
10
+ opacity: 0; } }
11
+
12
+
13
+ // ---------------------------------------------------------------------------
14
+ @include keyframes(rotateOutDownLeft) {
15
+ 0% {
16
+ @include transform-origin(left bottom);
17
+ @include rotate(0);
18
+ opacity: 1; }
19
+ 100% {
20
+ @include transform-origin(left bottom);
21
+ @include rotate(90deg);
22
+ opacity: 0; } }
23
+
24
+
25
+ // ---------------------------------------------------------------------------
26
+ @include keyframes(rotateOutUpLeft) {
27
+ 0% {
28
+ @include transform-origin(left bottom);
29
+ @include rotate(0);
30
+ opacity: 1; }
31
+ 100% {
32
+ @include transform-origin(left bottom);
33
+ @include rotate(-90deg);
34
+ opacity: 0; } }
35
+
36
+
37
+ // ---------------------------------------------------------------------------
38
+ @include keyframes(rotateOutDownRight) {
39
+ 0% {
40
+ @include transform-origin(right bottom);
41
+ @include rotate(0);
42
+ opacity: 1; }
43
+ 100% {
44
+ @include transform-origin(right bottom);
45
+ @include rotate(-90deg);
46
+ opacity: 0; } }
47
+
48
+
49
+ // ---------------------------------------------------------------------------
50
+ @include keyframes(rotateOutUpRight) {
51
+ 0% {
52
+ @include transform-origin(right bottom);
53
+ @include rotate(0);
54
+ opacity: 1; }
55
+ 100% {
56
+ @include transform-origin(right bottom);
57
+ @include rotate(90deg);
58
+ opacity: 0; } }
@@ -0,0 +1,115 @@
1
+ @import "animation/experimental";
2
+
3
+ // ---------------------------------------------------------------------------
4
+ // Apply an animation property and value with the correct browser support
5
+ @mixin animation-support($property, $value) {
6
+ @include experimental($property, $value, -moz, -webkit, not -o, -ms, not -khtml, official); }
7
+
8
+ // ---------------------------------------------------------------------------
9
+ // Set your animation defaults.
10
+ // $default-animation-name : Name of any animation as a string. [<name>]
11
+ // $default-animation-duration : Duration of the entire animation. [<seconds>]
12
+ // $default-animation-delay : Delay for start of animation. [<seconds>]
13
+ // $default-animation-timing-function : The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]
14
+ // $default-animation-iteration-count : The number of times an animation cycle is played. [infinite | <number>]
15
+ // $default-animation-direction : Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
16
+ // $default-animation-fill-mode : What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
17
+
18
+ $default-animation-name: false;
19
+ $default-animation-duration: false;
20
+ $default-animation-delay: false;
21
+ $default-animation-timing-function: false;
22
+ $default-animation-iteration-count: false;
23
+ $default-animation-direction: false;
24
+ $default-animation-fill-mode: false;
25
+
26
+ // ---------------------------------------------------------------------------
27
+ // Create up a named animation sequesnce that can be applied to elements later.
28
+ // $name - The name of your animation.
29
+ // @content - The keyframes of the animation.
30
+ @mixin keyframes(
31
+ $name,
32
+ $moz: $experimental-support-for-mozilla,
33
+ $webkit: $experimental-support-for-webkit,
34
+ $o: $experimental-support-for-opera,
35
+ $ms: $experimental-support-for-microsoft,
36
+ $khtml: $experimental-support-for-khtml,
37
+ $official: true
38
+ ) {
39
+ @if $moz {
40
+ @include with-only-support-for($moz: true) {
41
+ @-moz-keyframes #{$name} { @content; }
42
+ }
43
+ }
44
+ @if $webkit {
45
+ @include with-only-support-for($webkit: true) {
46
+ @-webkit-keyframes #{$name} { @content; }
47
+ }
48
+ }
49
+ @if $o {
50
+ @include with-only-support-for($o: true) {
51
+ @-o-keyframes #{$name} { @content; }
52
+ }
53
+ }
54
+ @if $ms {
55
+ @include with-only-support-for($ms: true) {
56
+ @-ms-keyframes #{$name} { @content; }
57
+ }
58
+ }
59
+ @if $khtml {
60
+ @include with-only-support-for($khtml: true) {
61
+ @-khtml-keyframes #{$name} { @content; }
62
+ }
63
+ }
64
+ @if $official {
65
+ @include with-only-support-for {
66
+ @keyframes #{$name} { @content; }
67
+ }
68
+ }
69
+ }
70
+
71
+ // ---------------------------------------------------------------------------
72
+ @mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
73
+ $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
74
+ @include animation-support(animation-name, $name); }
75
+
76
+ // ---------------------------------------------------------------------------
77
+ @mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
78
+ $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
79
+ @include animation-support(animation-duration, $duration); }
80
+
81
+ // ---------------------------------------------------------------------------
82
+ @mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
83
+ $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
84
+ @include animation-support(animation-delay, $delay); }
85
+
86
+ // ---------------------------------------------------------------------------
87
+ @mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
88
+ $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
89
+ @include animation-support(animation-timing-function, $function); }
90
+
91
+ // ---------------------------------------------------------------------------
92
+ @mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
93
+ $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
94
+ @include animation-support(animation-iteration-count, $count); }
95
+
96
+ // ---------------------------------------------------------------------------
97
+ @mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
98
+ $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
99
+ @include animation-support(animation-direction, $direction); }
100
+
101
+ // ---------------------------------------------------------------------------
102
+ @mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
103
+ $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
104
+ @include animation-support(animation-fill-mode, $mode); }
105
+
106
+ // ---------------------------------------------------------------------------
107
+ // Shortcut to apply a named animation to an element, with all the settings.
108
+ // $animation-1 : Name and settings for the first animation. [<values> | default]
109
+ // ...
110
+ // $animation-10 : Name and settings for the tenth animation. <values>
111
+ @mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
112
+ @if $animation-1 == default {
113
+ $animation-1: -compass-space-list(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)); }
114
+ $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
115
+ @include animation-support(animation, $animation); }
@@ -0,0 +1,22 @@
1
+ @mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
2
+ $experimental-support-for-mozilla: $moz;
3
+ $experimental-support-for-webkit: $webkit;
4
+ $experimental-support-for-microsoft: $ms;
5
+ $experimental-support-for-opera: $o;
6
+ $experimental-support-for-khtml: $khtml;
7
+ }
8
+
9
+ @mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
10
+ // Capture the current state
11
+ $original-moz: $experimental-support-for-mozilla;
12
+ $original-webkit: $experimental-support-for-webkit;
13
+ $original-o: $experimental-support-for-opera;
14
+ $original-ms: $experimental-support-for-microsoft;
15
+ $original-khtml: $experimental-support-for-khtml;
16
+
17
+ @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
18
+
19
+ @content;
20
+
21
+ @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
22
+ }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: animation
3
3
  version: !ruby/object:Gem::Version
4
- hash: -3702664284
4
+ hash: -3702664282
5
5
  prerelease: 4
6
6
  segments:
7
7
  - 0
8
8
  - 1
9
9
  - alpha
10
- - 0
11
- version: 0.1.alpha.0
10
+ - 1
11
+ version: 0.1.alpha.1
12
12
  platform: ruby
13
13
  authors:
14
14
  - Eric Meyer
@@ -26,14 +26,14 @@ dependencies:
26
26
  requirements:
27
27
  - - ">="
28
28
  - !ruby/object:Gem::Version
29
- hash: -3702664358
29
+ hash: -3702664282
30
30
  segments:
31
31
  - 3
32
32
  - 2
33
33
  - 0
34
34
  - alpha
35
- - 35
36
- version: 3.2.0.alpha.35
35
+ - 93
36
+ version: 3.2.0.alpha.93
37
37
  type: :runtime
38
38
  version_requirements: *id001
39
39
  - !ruby/object:Gem::Dependency
@@ -44,16 +44,15 @@ dependencies:
44
44
  requirements:
45
45
  - - ">="
46
46
  - !ruby/object:Gem::Version
47
- hash: -3702664244
47
+ hash: 47
48
48
  segments:
49
49
  - 0
50
50
  - 12
51
- - alpha
52
51
  - 0
53
- version: 0.12.alpha.0
52
+ version: 0.12.0
54
53
  type: :runtime
55
54
  version_requirements: *id002
56
- description: css3 animations plugin for compass
55
+ description: css3 animations plugin for compass, with core animation mixins, and optional defaul animations from animate.css.
57
56
  email: eric@oddbird.net
58
57
  executables: []
59
58
 
@@ -64,20 +63,21 @@ extra_rdoc_files: []
64
63
  files:
65
64
  - README.mdown
66
65
  - lib/animation.rb
67
- - stylesheets/_animation.sass
68
- - stylesheets/animation/animate/_attention-seekers.sass
69
- - stylesheets/animation/animate/_bouncing.sass
70
- - stylesheets/animation/animate/_fading.sass
71
- - stylesheets/animation/animate/_rotating.sass
72
- - stylesheets/animation/animate/_specials.sass
73
- - stylesheets/animation/animate/bouncing/_bouncing-entrances.sass
74
- - stylesheets/animation/animate/bouncing/_bouncing-exits.sass
75
- - stylesheets/animation/animate/fading/_fading-entrances.sass
76
- - stylesheets/animation/animate/fading/_fading-exits.sass
77
- - stylesheets/animation/animate/rotating/_rotating-entrances.sass
78
- - stylesheets/animation/animate/rotating/_rotating-exits.sass
79
- - stylesheets/animation/animate.sass
80
- - stylesheets/animation/core.sass
66
+ - stylesheets/_animation.scss
67
+ - stylesheets/animation/animate/_attention-seekers.scss
68
+ - stylesheets/animation/animate/_bouncing.scss
69
+ - stylesheets/animation/animate/_fading.scss
70
+ - stylesheets/animation/animate/_rotating.scss
71
+ - stylesheets/animation/animate/_specials.scss
72
+ - stylesheets/animation/animate/bouncing/_bouncing-entrances.scss
73
+ - stylesheets/animation/animate/bouncing/_bouncing-exits.scss
74
+ - stylesheets/animation/animate/fading/_fading-entrances.scss
75
+ - stylesheets/animation/animate/fading/_fading-exits.scss
76
+ - stylesheets/animation/animate/rotating/_rotating-entrances.scss
77
+ - stylesheets/animation/animate/rotating/_rotating-exits.scss
78
+ - stylesheets/animation/animate.scss
79
+ - stylesheets/animation/core.scss
80
+ - stylesheets/animation/experimental.scss
81
81
  homepage: https://github.com/ericam/compass-animation
82
82
  licenses: []
83
83
 
@@ -1,120 +0,0 @@
1
- // ---------------------------------------------------------------------------
2
- +keyframes(flash)
3
- 0%
4
- opacity: 1
5
- 25%
6
- opacity: 0
7
- 50%
8
- opacity: 1
9
- 75%
10
- opacity: 0
11
- 100%
12
- opacity: 1
13
-
14
- // ---------------------------------------------------------------------------
15
- +keyframes(bounce)
16
- 0%
17
- +translateY(0)
18
- 20%
19
- +translateY(0)
20
- 40%
21
- +translateY(-30px)
22
- 50%
23
- +translateY(0)
24
- 60%
25
- +translateY(-15px)
26
- 80%
27
- +translateY(0)
28
- 100%
29
- +translateY(0)
30
-
31
- // ---------------------------------------------------------------------------
32
- +keyframes(shake)
33
- 0%
34
- +translateX(0)
35
- 10%
36
- +translateX(-10px)
37
- 20%
38
- +translateX(10px)
39
- 30%
40
- +translateX(-10px)
41
- 40%
42
- +translateX(10px)
43
- 50%
44
- +translateX(-10px)
45
- 60%
46
- +translateX(10px)
47
- 70%
48
- +translateX(-10px)
49
- 80%
50
- +translateX(10px)
51
- 90%
52
- +translateX(-10px)
53
- 100%
54
- +translateX(0)
55
-
56
- // ---------------------------------------------------------------------------
57
- +keyframes(tada)
58
- 0%
59
- +scale(1)
60
- 10%
61
- +transform(scale(0.9) rotate(-3deg))
62
- 20%
63
- +transform(scale(0.9) rotate(-3deg))
64
- 30%
65
- +transform(scale(1.1) rotate(3deg))
66
- 40%
67
- +transform(scale(1.1) rotate(-3deg))
68
- 50%
69
- +transform(scale(1.1) rotate(3deg))
70
- 60%
71
- +transform(scale(1.1) rotate(-3deg))
72
- 70%
73
- +transform(scale(1.1) rotate(3deg))
74
- 80%
75
- +transform(scale(1.1) rotate(-3deg))
76
- 90%
77
- +transform(scale(1.1) rotate(3deg))
78
- 100%
79
- +transform(scale(1) rotate(0))
80
-
81
- // ---------------------------------------------------------------------------
82
- +keyframes(swing)
83
- 20%, 40%, 60%, 80%, 100%
84
- +transform-origin(top center)
85
- 20%
86
- +rotate(15deg)
87
- 40%
88
- +rotate(-10deg)
89
- 60%
90
- +rotate(5deg)
91
- 80%
92
- +rotate(-5deg)
93
- 100%
94
- +rotate(0deg)
95
-
96
- // ---------------------------------------------------------------------------
97
- +keyframes(wobble)
98
- 0%
99
- +translateX(0%)
100
- 15%
101
- +transform(translateX(-25%) rotate(-5deg))
102
- 30%
103
- +transform(translateX(20%) rotate(3deg))
104
- 45%
105
- +transform(translateX(-15%) rotate(-3deg))
106
- 60%
107
- +transform(translateX(10%) rotate(2deg))
108
- 75%
109
- +transform(translateX(-5%) rotate(-1deg))
110
- 100%
111
- +transform(translateX(0%))
112
-
113
- // ---------------------------------------------------------------------------
114
- +keyframes(pulse)
115
- 0%
116
- +scale(1)
117
- 50%
118
- +scale(1.1)
119
- 100%
120
- +scale(1)