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
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -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);
@@ -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
  }
@@ -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
  }
@@ -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
  }