animate 0.1.0 → 0.2.beta.0

Sign up to get free protection for your applications and to get access to all the features.
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
  }