animate 0.1.0 → 0.2.beta.0

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 (31) hide show
  1. data/stylesheets/_animate.scss +15 -9
  2. data/stylesheets/_helpers.scss +10 -6
  3. data/stylesheets/animate/_attention.scss +13 -9
  4. data/stylesheets/animate/_bounce.scss +40 -34
  5. data/stylesheets/animate/_fade.scss +25 -21
  6. data/stylesheets/animate/_flip.scss +47 -33
  7. data/stylesheets/animate/_lightSpeed.scss +7 -3
  8. data/stylesheets/animate/_roll.scss +7 -3
  9. data/stylesheets/animate/_rotate.scss +17 -14
  10. data/stylesheets/animate/_special.scss +6 -2
  11. data/stylesheets/animate/attention/_flash.scss +21 -16
  12. data/stylesheets/animate/attention/_pulse.scss +15 -10
  13. data/stylesheets/animate/attention/_shake.scss +39 -34
  14. data/stylesheets/animate/attention/_swing.scss +24 -19
  15. data/stylesheets/animate/attention/_tada.scss +38 -33
  16. data/stylesheets/animate/attention/_wiggle.scss +39 -34
  17. data/stylesheets/animate/attention/_wobble.scss +27 -22
  18. data/stylesheets/animate/bounce/_bounceIn.scss +100 -75
  19. data/stylesheets/animate/bounce/_bounceOut.scss +88 -63
  20. data/stylesheets/animate/fade/_fadeIn.scss +133 -88
  21. data/stylesheets/animate/fade/_fadeOut.scss +133 -88
  22. data/stylesheets/animate/flip/_flipIn.scss +47 -33
  23. data/stylesheets/animate/flip/_flipOut.scss +35 -21
  24. data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +22 -17
  25. data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +14 -9
  26. data/stylesheets/animate/roll/_rollIn.scss +14 -9
  27. data/stylesheets/animate/roll/_rollOut.scss +13 -8
  28. data/stylesheets/animate/rotate/_rotateIn.scss +114 -72
  29. data/stylesheets/animate/rotate/_rotateOut.scss +114 -72
  30. data/stylesheets/animate/special/_hinge.scss +32 -27
  31. metadata +10 -7
data/stylesheets/animate/_special.scss CHANGED
@@ -6,8 +6,12 @@
6
6
  // ---------------------------------------------------------------------------
7
7
  // special [ hinge | all ]
8
8
 
9
- @mixin animate-special($sub: all, $class: $default-animation-class-mode) {
9
+ @mixin animate-special(
10
+ $sub : all,
11
+ $class : $default-animation-class-mode,
12
+ $keyframes : $default-keyframes-output
13
+ ) {
10
14
  $sub : compact($sub);
11
15
  $hinge : yepnope($sub, all hinge);
12
- @if $hinge { @include animate-hinge($class); }
16
+ @if $hinge { @include animate-hinge($class, $keyframes); }
13
17
  }
data/stylesheets/animate/attention/_flash.scss CHANGED
@@ -6,24 +6,29 @@
6
6
  // ---------------------------------------------------------------------------
7
7
  // flash
8
8
 
9
- @mixin animate-flash($class: $default-animation-class-mode) {
9
+ @mixin animate-flash(
10
+ $class : $default-animation-class-mode,
11
+ $keyframes : $default-keyframes-output
12
+ ) {
10
13
  $name: flash;
11
- @include keyframes($name) {
12
- 0% {
13
- opacity: 1;
14
+ @if $keyframes {
15
+ @include keyframes($name) {
16
+ 0% {
17
+ opacity: 1;
18
+ }
19
+ 25% {
20
+ opacity: 0;
21
+ }
22
+ 50% {
23
+ opacity: 1;
24
+ }
25
+ 75% {
26
+ opacity: 0;
27
+ }
28
+ 100% {
29
+ opacity: 1;
30
+ }
14
31
  }
15
- 25% {
16
- opacity: 0;
17
- }
18
- 50% {
19
- opacity: 1;
20
- }
21
- 75% {
22
- opacity: 0;
23
- }
24
- 100% {
25
- opacity: 1;
26
- }
27
32
  }
28
33
  @include animation-class($name, $class) {}
29
34
  }
data/stylesheets/animate/attention/_pulse.scss CHANGED
@@ -6,18 +6,23 @@
6
6
  // ---------------------------------------------------------------------------
7
7
  // pulse
8
8
 
9
- @mixin animate-pulse($class: $default-animation-class-mode) {
9
+ @mixin animate-pulse(
10
+ $class : $default-animation-class-mode,
11
+ $keyframes : $default-keyframes-output
12
+ ) {
10
13
  $name: pulse;
11
- @include keyframes($name) {
12
- 0% {
13
- @include scale(1);
14
+ @if $keyframes {
15
+ @include keyframes($name) {
16
+ 0% {
17
+ @include scale(1);
18
+ }
19
+ 50% {
20
+ @include scale(1.1);
21
+ }
22
+ 100% {
23
+ @include scale(1);
24
+ }
14
25
  }
15
- 50% {
16
- @include scale(1.1);
17
- }
18
- 100% {
19
- @include scale(1);
20
- }
21
26
  }
22
27
  @include animation-class($name, $class) {}
23
28
  }
data/stylesheets/animate/attention/_shake.scss CHANGED
@@ -7,42 +7,47 @@
7
7
  // ---------------------------------------------------------------------------
8
8
  // shake
9
9
 
10
- @mixin animate-shake($class: $default-animation-class-mode) {
10
+ @mixin animate-shake(
11
+ $class : $default-animation-class-mode,
12
+ $keyframes : $default-keyframes-output
13
+ ) {
11
14
  $name: shake;
12
- @include keyframes($name) {
13
- 0% {
14
- @include translateX(0);
15
+ @if $keyframes {
16
+ @include keyframes($name) {
17
+ 0% {
18
+ @include translateX(0);
19
+ }
20
+ 10% {
21
+ @include translateX(-10px);
22
+ }
23
+ 20% {
24
+ @include translateX(10px);
25
+ }
26
+ 30% {
27
+ @include translateX(-10px);
28
+ }
29
+ 40% {
30
+ @include translateX(10px);
31
+ }
32
+ 50% {
33
+ @include translateX(-10px);
34
+ }
35
+ 60% {
36
+ @include translateX(10px);
37
+ }
38
+ 70% {
39
+ @include translateX(-10px);
40
+ }
41
+ 80% {
42
+ @include translateX(10px);
43
+ }
44
+ 90% {
45
+ @include translateX(-10px);
46
+ }
47
+ 100% {
48
+ @include translateX(0);
49
+ }
15
50
  }
16
- 10% {
17
- @include translateX(-10px);
18
- }
19
- 20% {
20
- @include translateX(10px);
21
- }
22
- 30% {
23
- @include translateX(-10px);
24
- }
25
- 40% {
26
- @include translateX(10px);
27
- }
28
- 50% {
29
- @include translateX(-10px);
30
- }
31
- 60% {
32
- @include translateX(10px);
33
- }
34
- 70% {
35
- @include translateX(-10px);
36
- }
37
- 80% {
38
- @include translateX(10px);
39
- }
40
- 90% {
41
- @include translateX(-10px);
42
- }
43
- 100% {
44
- @include translateX(0);
45
- }
46
51
  }
47
52
  @include animation-class($name, $class) {}
48
53
  }
data/stylesheets/animate/attention/_swing.scss CHANGED
@@ -7,27 +7,32 @@
7
7
  // ---------------------------------------------------------------------------
8
8
  // swing
9
9
 
10
- @mixin animate-swing($class: $default-animation-class-mode) {
10
+ @mixin animate-swing(
11
+ $class : $default-animation-class-mode,
12
+ $keyframes : $default-keyframes-output
13
+ ) {
11
14
  $name: swing;
12
- @include keyframes($name) {
13
- 20%, 40%, 60%, 80%, 100% {
14
- @include transform-origin(top, center);
15
+ @if $keyframes {
16
+ @include keyframes($name) {
17
+ 20%, 40%, 60%, 80%, 100% {
18
+ @include transform-origin(top, center);
19
+ }
20
+ 20% {
21
+ @include rotate(15deg);
22
+ }
23
+ 40% {
24
+ @include rotate(-10deg);
25
+ }
26
+ 60% {
27
+ @include rotate(5deg);
28
+ }
29
+ 80% {
30
+ @include rotate(-5deg);
31
+ }
32
+ 100% {
33
+ @include rotate(0deg);
34
+ }
15
35
  }
16
- 20% {
17
- @include rotate(15deg);
18
- }
19
- 40% {
20
- @include rotate(-10deg);
21
- }
22
- 60% {
23
- @include rotate(5deg);
24
- }
25
- 80% {
26
- @include rotate(-5deg);
27
- }
28
- 100% {
29
- @include rotate(0deg);
30
- }
31
36
  }
32
37
  @include animation-class($name, $class) {
33
38
  @include transform-origin(top, center);
data/stylesheets/animate/attention/_tada.scss CHANGED
@@ -6,41 +6,46 @@
6
6
  // ---------------------------------------------------------------------------
7
7
  // tada
8
8
 
9
- @mixin animate-tada($class: $default-animation-class-mode) {
9
+ @mixin animate-tada(
10
+ $class : $default-animation-class-mode,
11
+ $keyframes : $default-keyframes-output
12
+ ) {
10
13
  $name: tada;
11
- @include keyframes($name) {
12
- 0% {
13
- @include scale(1); }
14
- 10% {
15
- @include transform(scale(0.9) rotate(-3deg));
14
+ @if $keyframes {
15
+ @include keyframes($name) {
16
+ 0% {
17
+ @include scale(1); }
18
+ 10% {
19
+ @include transform(scale(0.9) rotate(-3deg));
20
+ }
21
+ 20% {
22
+ @include transform(scale(0.9) rotate(-3deg));
23
+ }
24
+ 30% {
25
+ @include transform(scale(1.1) rotate(3deg));
26
+ }
27
+ 40% {
28
+ @include transform(scale(1.1) rotate(-3deg));
29
+ }
30
+ 50% {
31
+ @include transform(scale(1.1) rotate(3deg));
32
+ }
33
+ 60% {
34
+ @include transform(scale(1.1) rotate(-3deg));
35
+ }
36
+ 70% {
37
+ @include transform(scale(1.1) rotate(3deg));
38
+ }
39
+ 80% {
40
+ @include transform(scale(1.1) rotate(-3deg));
41
+ }
42
+ 90% {
43
+ @include transform(scale(1.1) rotate(3deg));
44
+ }
45
+ 100% {
46
+ @include transform(scale(1) rotate(0));
47
+ }
16
48
  }
17
- 20% {
18
- @include transform(scale(0.9) rotate(-3deg));
19
- }
20
- 30% {
21
- @include transform(scale(1.1) rotate(3deg));
22
- }
23
- 40% {
24
- @include transform(scale(1.1) rotate(-3deg));
25
- }
26
- 50% {
27
- @include transform(scale(1.1) rotate(3deg));
28
- }
29
- 60% {
30
- @include transform(scale(1.1) rotate(-3deg));
31
- }
32
- 70% {
33
- @include transform(scale(1.1) rotate(3deg));
34
- }
35
- 80% {
36
- @include transform(scale(1.1) rotate(-3deg));
37
- }
38
- 90% {
39
- @include transform(scale(1.1) rotate(3deg));
40
- }
41
- 100% {
42
- @include transform(scale(1) rotate(0));
43
- }
44
49
  }
45
50
  @include animation-class($name, $class) {}
46
51
  }
data/stylesheets/animate/attention/_wiggle.scss CHANGED
@@ -6,42 +6,47 @@
6
6
  // ---------------------------------------------------------------------------
7
7
  // wiggle
8
8
 
9
- @mixin animate-wiggle($class: $default-animation-class-mode) {
9
+ @mixin animate-wiggle(
10
+ $class : $default-animation-class-mode,
11
+ $keyframes : $default-keyframes-output
12
+ ) {
10
13
  $name: wiggle;
11
- @include keyframes($name) {
12
- 0% {
13
- @include skewX(9deg);
14
+ @if $keyframes {
15
+ @include keyframes($name) {
16
+ 0% {
17
+ @include skewX(9deg);
18
+ }
19
+ 10% {
20
+ @include skewX(-8deg);
21
+ }
22
+ 20% {
23
+ @include skewX(7deg);
24
+ }
25
+ 30% {
26
+ @include skewX(-6deg);
27
+ }
28
+ 40% {
29
+ @include skewX(5deg);
30
+ }
31
+ 50% {
32
+ @include skewX(-4deg);
33
+ }
34
+ 60% {
35
+ @include skewX(3deg);
36
+ }
37
+ 70% {
38
+ @include skewX(-2deg);
39
+ }
40
+ 80% {
41
+ @include skewX(1deg);
42
+ }
43
+ 90% {
44
+ @include skewX(0deg);
45
+ }
46
+ 100% {
47
+ @include skewX(0deg);
48
+ }
14
49
  }
15
- 10% {
16
- @include skewX(-8deg);
17
- }
18
- 20% {
19
- @include skewX(7deg);
20
- }
21
- 30% {
22
- @include skewX(-6deg);
23
- }
24
- 40% {
25
- @include skewX(5deg);
26
- }
27
- 50% {
28
- @include skewX(-4deg);
29
- }
30
- 60% {
31
- @include skewX(3deg);
32
- }
33
- 70% {
34
- @include skewX(-2deg);
35
- }
36
- 80% {
37
- @include skewX(1deg);
38
- }
39
- 90% {
40
- @include skewX(0deg);
41
- }
42
- 100% {
43
- @include skewX(0deg);
44
- }
45
50
  }
46
51
  @include animation-class($name, $class) {}
47
52
  }
data/stylesheets/animate/attention/_wobble.scss CHANGED
@@ -7,30 +7,35 @@
7
7
  // ---------------------------------------------------------------------------
8
8
  // wobble
9
9
 
10
- @mixin animate-wobble($class: $default-animation-class-mode) {
10
+ @mixin animate-wobble(
11
+ $class : $default-animation-class-mode,
12
+ $keyframes : $default-keyframes-output
13
+ ) {
11
14
  $name: wobble;
12
- @include keyframes($name) {
13
- 0% {
14
- @include translateX(0%);
15
+ @if $keyframes {
16
+ @include keyframes($name) {
17
+ 0% {
18
+ @include translateX(0%);
19
+ }
20
+ 15% {
21
+ @include transform(translateX(-25%) rotate(-5deg));
22
+ }
23
+ 30% {
24
+ @include transform(translateX(20%) rotate(3deg));
25
+ }
26
+ 45% {
27
+ @include transform(translateX(-15%) rotate(-3deg));
28
+ }
29
+ 60% {
30
+ @include transform(translateX(10%) rotate(2deg));
31
+ }
32
+ 75% {
33
+ @include transform(translateX(-5%) rotate(-1deg));
34
+ }
35
+ 100% {
36
+ @include transform(translateX(0%));
37
+ }
15
38
  }
16
- 15% {
17
- @include transform(translateX(-25%) rotate(-5deg));
18
- }
19
- 30% {
20
- @include transform(translateX(20%) rotate(3deg));
21
- }
22
- 45% {
23
- @include transform(translateX(-15%) rotate(-3deg));
24
- }
25
- 60% {
26
- @include transform(translateX(10%) rotate(2deg));
27
- }
28
- 75% {
29
- @include transform(translateX(-5%) rotate(-1deg));
30
- }
31
- 100% {
32
- @include transform(translateX(0%));
33
- }
34
39
  }
35
40
  @include animation-class($name, $class) {}
36
41
  }