sammy 0.0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +4 -0
  3. data/lib/sammy.rb +9 -0
  4. data/stylesheets/_sammy.sass +3 -0
  5. data/stylesheets/sammy/_animations.scss +35 -0
  6. data/stylesheets/sammy/_css3.scss +3 -0
  7. data/stylesheets/sammy/_shared.scss +2 -0
  8. data/stylesheets/sammy/_utilities.scss +1 -0
  9. data/stylesheets/sammy/animations/_attention-seekers.scss +7 -0
  10. data/stylesheets/sammy/animations/_bouncing-entrances.scss +5 -0
  11. data/stylesheets/sammy/animations/_bouncing-exits.scss +5 -0
  12. data/stylesheets/sammy/animations/_fading-entrances.scss +12 -0
  13. data/stylesheets/sammy/animations/_fading-exits.scss +12 -0
  14. data/stylesheets/sammy/animations/_flippers.scss +5 -0
  15. data/stylesheets/sammy/animations/_rotating-entrances.scss +5 -0
  16. data/stylesheets/sammy/animations/_rotating-exits.scss +5 -0
  17. data/stylesheets/sammy/animations/_specials.scss +3 -0
  18. data/stylesheets/sammy/animations/attention-seekers/_bounce.scss +30 -0
  19. data/stylesheets/sammy/animations/attention-seekers/_flash.scss +28 -0
  20. data/stylesheets/sammy/animations/attention-seekers/_pulse.scss +28 -0
  21. data/stylesheets/sammy/animations/attention-seekers/_shake.scss +34 -0
  22. data/stylesheets/sammy/animations/attention-seekers/_swing.scss +30 -0
  23. data/stylesheets/sammy/animations/attention-seekers/_tada.scss +34 -0
  24. data/stylesheets/sammy/animations/attention-seekers/_wobble.scss +32 -0
  25. data/stylesheets/sammy/animations/bouncing-entrances/_bounceIn.scss +37 -0
  26. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInDown.scss +37 -0
  27. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInLeft.scss +37 -0
  28. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInRight.scss +37 -0
  29. data/stylesheets/sammy/animations/bouncing-entrances/_bounceInUp.scss +37 -0
  30. data/stylesheets/sammy/animations/bouncing-exits/_bounceOut.scss +37 -0
  31. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutDown.scss +34 -0
  32. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutLeft.scss +34 -0
  33. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutRight.scss +34 -0
  34. data/stylesheets/sammy/animations/bouncing-exits/_bounceOutUp.scss +34 -0
  35. data/stylesheets/sammy/animations/fading-entrances/_fadeIn.scss +25 -0
  36. data/stylesheets/sammy/animations/fading-entrances/_fadeInDown.scss +31 -0
  37. data/stylesheets/sammy/animations/fading-entrances/_fadeInDownBig.scss +31 -0
  38. data/stylesheets/sammy/animations/fading-entrances/_fadeInLeft.scss +31 -0
  39. data/stylesheets/sammy/animations/fading-entrances/_fadeInLeftBig.scss +31 -0
  40. data/stylesheets/sammy/animations/fading-entrances/_fadeInRight.scss +31 -0
  41. data/stylesheets/sammy/animations/fading-entrances/_fadeInRightBig.scss +31 -0
  42. data/stylesheets/sammy/animations/fading-entrances/_fadeInUp.scss +31 -0
  43. data/stylesheets/sammy/animations/fading-entrances/_fadeInUpBig.scss +31 -0
  44. data/stylesheets/sammy/animations/fading-exits/_fadeOut.scss +25 -0
  45. data/stylesheets/sammy/animations/fading-exits/_fadeOutDown.scss +31 -0
  46. data/stylesheets/sammy/animations/fading-exits/_fadeOutDownBig.scss +31 -0
  47. data/stylesheets/sammy/animations/fading-exits/_fadeOutLeft.scss +31 -0
  48. data/stylesheets/sammy/animations/fading-exits/_fadeOutLeftBig.scss +31 -0
  49. data/stylesheets/sammy/animations/fading-exits/_fadeOutRight.scss +31 -0
  50. data/stylesheets/sammy/animations/fading-exits/_fadeOutRightBig.scss +31 -0
  51. data/stylesheets/sammy/animations/fading-exits/_fadeOutUp.scss +31 -0
  52. data/stylesheets/sammy/animations/fading-exits/_fadeOutUpBig.scss +31 -0
  53. data/stylesheets/sammy/animations/flippers/_flip.scss +44 -0
  54. data/stylesheets/sammy/animations/flippers/_flipInX.scss +38 -0
  55. data/stylesheets/sammy/animations/flippers/_flipInY.scss +38 -0
  56. data/stylesheets/sammy/animations/flippers/_flipOutX.scss +32 -0
  57. data/stylesheets/sammy/animations/flippers/_flipOutY.scss +32 -0
  58. data/stylesheets/sammy/animations/rotating-entrances/_rotateIn.scss +33 -0
  59. data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownLeft.scss +33 -0
  60. data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownRight.scss +33 -0
  61. data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpLeft.scss +33 -0
  62. data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpRight.scss +33 -0
  63. data/stylesheets/sammy/animations/rotating-exits/_rotateOut.scss +33 -0
  64. data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownLeft.scss +33 -0
  65. data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownRight.scss +33 -0
  66. data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpLeft.scss +33 -0
  67. data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpRight.scss +33 -0
  68. data/stylesheets/sammy/animations/specials/_hinge.scss +48 -0
  69. data/stylesheets/sammy/animations/specials/_rollIn.scss +33 -0
  70. data/stylesheets/sammy/animations/specials/_rollOut.scss +33 -0
  71. data/stylesheets/sammy/css3/_animation.scss +75 -0
  72. data/stylesheets/sammy/css3/_backface-visibility.scss +14 -0
  73. data/stylesheets/sammy/css3/_transform.scss +27 -0
  74. data/stylesheets/sammy/css3/animation/_animation-delay.scss +18 -0
  75. data/stylesheets/sammy/css3/animation/_animation-direction.scss +18 -0
  76. data/stylesheets/sammy/css3/animation/_animation-duration.scss +17 -0
  77. data/stylesheets/sammy/css3/animation/_animation-fill-mode.scss +18 -0
  78. data/stylesheets/sammy/css3/animation/_animation-iteration-count.scss +18 -0
  79. data/stylesheets/sammy/css3/animation/_animation-name.scss +18 -0
  80. data/stylesheets/sammy/css3/animation/_animation-play-state.scss +18 -0
  81. data/stylesheets/sammy/css3/animation/_animation-timing-function.scss +18 -0
  82. data/stylesheets/sammy/utilities/_mixins.scss +12 -0
  83. data/templates/sammy/manifest.rb +2 -0
  84. data/templates/sammy/screen.scss +2 -0
  85. metadata +140 -0
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 1b8c3cce084c248346fc48af0828a2f7f0492b79
4
+ data.tar.gz: 33ff14f7e6cf5e1d058fc6360b57c3a5e11c1f80
5
+ SHA512:
6
+ metadata.gz: 52127a426582efb416f51ecc90f61e4784793a097d0d691b81dde571290f8efcf0ca86e89367c6aa5e1be1f87f2d19986972d5e4e58b4499a13cc20e4e5b0b12
7
+ data.tar.gz: 793289d5dbaf3985ddef955c24294392f14122f6fdc0052fe1bd532c836769514a74737867e0b621b7ad415a1e1607c706eed7db1edaf885a08c6ace485186d7
@@ -0,0 +1,4 @@
1
+ Sammy
2
+ =====
3
+
4
+ A wicked animation library for Sass and Compass
@@ -0,0 +1,9 @@
1
+ require 'compass'
2
+ Compass::Frameworks.register("sammy", :path => "#{File.dirname(__FILE__)}/..")
3
+
4
+ module Sammy
5
+
6
+ VERSION = "0.0.1.1"
7
+ DATE = "2013-12-04"
8
+
9
+ end
@@ -0,0 +1,3 @@
1
+ @import animate/shared;
2
+
3
+ @import animate/animations;
@@ -0,0 +1,35 @@
1
+ // Attention seekers
2
+ // flash bounce shake tada swing wobble pulse
3
+ @import "animations/attention-seekers";
4
+
5
+ // Fading entrances
6
+ // fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
7
+ @import "animations/fading-entrances";
8
+
9
+ // Fading exits
10
+ // fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
11
+ @import "animations/fading-exits";
12
+
13
+ // Bouncing entrances
14
+ // bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
15
+ @import "animations/bouncing-entrances";
16
+
17
+ // Bouncing exits
18
+ // bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
19
+ @import "animations/bouncing-exits";
20
+
21
+ // Rotating entrances
22
+ // rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
23
+ @import "animations/rotating-entrances";
24
+
25
+ // Rotating exits
26
+ // rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
27
+ @import "animations/rotating-exits";
28
+
29
+ // Specials
30
+ // hinge rollIn rollOut
31
+ @import "animations/specials";
32
+
33
+ // Flippers
34
+ // flip flipInX flipOutX flipInY flipOutY
35
+ @import "animations/flippers";
@@ -0,0 +1,3 @@
1
+ @import "css3/animation";
2
+ @import "css3/backface-visibility";
3
+ @import "css3/transform";
@@ -0,0 +1,2 @@
1
+ @import "css3";
2
+ @import "utilities";
@@ -0,0 +1 @@
1
+ @import "utilities/mixins";
@@ -0,0 +1,7 @@
1
+ @import "attention-seekers/bounce";
2
+ @import "attention-seekers/flash";
3
+ @import "attention-seekers/pulse";
4
+ @import "attention-seekers/shake";
5
+ @import "attention-seekers/swing";
6
+ @import "attention-seekers/tada";
7
+ @import "attention-seekers/wobble";
@@ -0,0 +1,5 @@
1
+ @import "bouncing-entrances/bounceIn";
2
+ @import "bouncing-entrances/bounceInDown";
3
+ @import "bouncing-entrances/bounceInUp";
4
+ @import "bouncing-entrances/bounceInLeft";
5
+ @import "bouncing-entrances/bounceInRight";
@@ -0,0 +1,5 @@
1
+ @import "bouncing-exits/bounceOut";
2
+ @import "bouncing-exits/bounceOutDown";
3
+ @import "bouncing-exits/bounceOutUp";
4
+ @import "bouncing-exits/bounceOutLeft";
5
+ @import "bouncing-exits/bounceOutRight";
@@ -0,0 +1,12 @@
1
+ // Normal
2
+ @import "fading-entrances/fadeIn";
3
+ @import "fading-entrances/fadeInUp";
4
+ @import "fading-entrances/fadeInDown";
5
+ @import "fading-entrances/fadeInLeft";
6
+ @import "fading-entrances/fadeInRight";
7
+
8
+ // Big
9
+ @import "fading-entrances/fadeInUpBig";
10
+ @import "fading-entrances/fadeInDownBig";
11
+ @import "fading-entrances/fadeInLeftBig";
12
+ @import "fading-entrances/fadeInRightBig";
@@ -0,0 +1,12 @@
1
+ // Normal
2
+ @import "fading-exits/fadeOut";
3
+ @import "fading-exits/fadeOutUp";
4
+ @import "fading-exits/fadeOutDown";
5
+ @import "fading-exits/fadeOutLeft";
6
+ @import "fading-exits/fadeOutRight";
7
+
8
+ // Big
9
+ @import "fading-exits/fadeOutUpBig";
10
+ @import "fading-exits/fadeOutDownBig";
11
+ @import "fading-exits/fadeOutLeftBig";
12
+ @import "fading-exits/fadeOutRightBig";
@@ -0,0 +1,5 @@
1
+ @import "flippers/flip";
2
+ @import "flippers/flipInX";
3
+ @import "flippers/flipOutX";
4
+ @import "flippers/flipInY";
5
+ @import "flippers/flipOutY";
@@ -0,0 +1,5 @@
1
+ @import "rotating-entrances/rotateIn";
2
+ @import "rotating-entrances/rotateInDownLeft";
3
+ @import "rotating-entrances/rotateInDownRight";
4
+ @import "rotating-entrances/rotateInUpLeft";
5
+ @import "rotating-entrances/rotateInUpRight";
@@ -0,0 +1,5 @@
1
+ @import "rotating-exits/rotateOut";
2
+ @import "rotating-exits/rotateOutDownLeft";
3
+ @import "rotating-exits/rotateOutDownRight";
4
+ @import "rotating-exits/rotateOutUpLeft";
5
+ @import "rotating-exits/rotateOutUpRight";
@@ -0,0 +1,3 @@
1
+ @import "specials/hinge";
2
+ @import "specials/rollIn";
3
+ @import "specials/rollOut";
@@ -0,0 +1,30 @@
1
+ @mixin bounce($prefix) {
2
+ 0% { @include transform(translateY(0), $prefix); }
3
+ 20% { @include transform(translateY(0), $prefix); }
4
+ 40% { @include transform(translateY(-30px), $prefix); }
5
+ 50% { @include transform(translateY(0), $prefix); }
6
+ 60% { @include transform(translateY(-15px), $prefix); }
7
+ 80% { @include transform(translateY(0), $prefix); }
8
+ 100% { @include transform(translateY(0), $prefix); }
9
+ }
10
+
11
+ @if $experimental-support-for-webkit {
12
+ @-webkit-keyframes bounce { @include bounce(webkit); }
13
+ }
14
+ @if $experimental-support-for-khtml {
15
+ @-khtml-keyframes bounce { @include bounce(khtml); }
16
+ }
17
+ @if $experimental-support-for-mozilla {
18
+ @-moz-keyframes bounce { @include bounce(moz); }
19
+ }
20
+ @if $experimental-support-for-microsoft {
21
+ @-ms-keyframes bounce { @include bounce(ms); }
22
+ }
23
+ @if $experimental-support-for-opera {
24
+ @-o-keyframes bounce { @include bounce(o); }
25
+ }
26
+ @keyframes bounce { @include bounce(none); }
27
+
28
+ .bounce {
29
+ @include animation-name(bounce);
30
+ }
@@ -0,0 +1,28 @@
1
+ @mixin flash {
2
+ 0% { opacity: 1; }
3
+ 25% { opacity: 0; }
4
+ 50% { opacity: 1; }
5
+ 75% { opacity: 0; }
6
+ 100% { opacity: 1; }
7
+ }
8
+
9
+ @if $experimental-support-for-webkit {
10
+ @-webkit-keyframes flash { @include flash; }
11
+ }
12
+ @if $experimental-support-for-khtml {
13
+ @-khtml-keyframes flash { @include flash; }
14
+ }
15
+ @if $experimental-support-for-mozilla {
16
+ @-moz-keyframes flash { @include flash; }
17
+ }
18
+ @if $experimental-support-for-microsoft {
19
+ @-ms-keyframes flash { @include flash; }
20
+ }
21
+ @if $experimental-support-for-opera {
22
+ @-o-keyframes flash { @include flash; }
23
+ }
24
+ @keyframes flash { @include flash; }
25
+
26
+ .flash {
27
+ @include animation-name(flash);
28
+ }
@@ -0,0 +1,28 @@
1
+ // Originally authored by Nick Pettit - https://github.com/nickpettit/glide
2
+
3
+ @mixin pulse($prefix) {
4
+ 0% { @include transform(scale(1), $prefix); }
5
+ 50% { @include transform(scale(1.1), $prefix); }
6
+ 100% { @include transform(scale(1), $prefix); }
7
+ }
8
+
9
+ @if $experimental-support-for-webkit {
10
+ @-webkit-keyframes pulse { @include pulse(webkit); }
11
+ }
12
+ @if $experimental-support-for-khtml {
13
+ @-khtml-keyframes pulse { @include pulse(khtml); }
14
+ }
15
+ @if $experimental-support-for-mozilla {
16
+ @-moz-keyframes pulse { @include pulse(moz); }
17
+ }
18
+ @if $experimental-support-for-microsoft {
19
+ @-ms-keyframes pulse { @include pulse(ms); }
20
+ }
21
+ @if $experimental-support-for-opera {
22
+ @-o-keyframes pulse { @include pulse(o); }
23
+ }
24
+ @keyframes pulse { @include pulse(none); }
25
+
26
+ .pulse {
27
+ @include animation-name(pulse);
28
+ }
@@ -0,0 +1,34 @@
1
+ @mixin shake($prefix) {
2
+ 0% { @include transform(translateX(0), $prefix); }
3
+ 10% { @include transform(translateX(-10px), $prefix); }
4
+ 20% { @include transform(translateX(10px), $prefix); }
5
+ 30% { @include transform(translateX(-10px), $prefix); }
6
+ 40% { @include transform(translateX(10px), $prefix); }
7
+ 50% { @include transform(translateX(-10px), $prefix); }
8
+ 60% { @include transform(translateX(10px), $prefix); }
9
+ 70% { @include transform(translateX(-10px), $prefix); }
10
+ 80% { @include transform(translateX(10px), $prefix); }
11
+ 90% { @include transform(translateX(-10px), $prefix); }
12
+ 100% { @include transform(translateX(0), $prefix); }
13
+ }
14
+
15
+ @if $experimental-support-for-webkit {
16
+ @-webkit-keyframes shake { @include shake(webkit); }
17
+ }
18
+ @if $experimental-support-for-khtml {
19
+ @-khtml-keyframes shake { @include shake(khtml); }
20
+ }
21
+ @if $experimental-support-for-mozilla {
22
+ @-moz-keyframes shake { @include shake(moz); }
23
+ }
24
+ @if $experimental-support-for-microsoft {
25
+ @-ms-keyframes shake { @include shake(ms); }
26
+ }
27
+ @if $experimental-support-for-opera {
28
+ @-o-keyframes shake { @include shake(o); }
29
+ }
30
+ @keyframes shake { @include shake(none); }
31
+
32
+ .shake {
33
+ @include animation-name(shake);
34
+ }
@@ -0,0 +1,30 @@
1
+ @mixin swing($prefix) {
2
+ 20%, 40%, 60%, 80%, 100% { @include transform-origin(top center, $prefix); }
3
+ 20% { @include transform(rotate(15deg), $prefix); }
4
+ 40% { @include transform(rotate(-10deg), $prefix); }
5
+ 60% { @include transform(rotate(5deg), $prefix); }
6
+ 80% { @include transform(rotate(-5deg), $prefix); }
7
+ 100% { @include transform(rotate(0deg), $prefix); }
8
+ }
9
+
10
+ @if $experimental-support-for-webkit {
11
+ @-webkit-keyframes swing { @include swing(webkit); }
12
+ }
13
+ @if $experimental-support-for-khtml {
14
+ @-khtml-keyframes swing { @include swing(khtml); }
15
+ }
16
+ @if $experimental-support-for-mozilla {
17
+ @-moz-keyframes swing { @include swing(moz); }
18
+ }
19
+ @if $experimental-support-for-microsoft {
20
+ @-ms-keyframes swing { @include swing(ms); }
21
+ }
22
+ @if $experimental-support-for-opera {
23
+ @-o-keyframes swing { @include swing(o); }
24
+ }
25
+ @keyframes swing { @include swing(none); }
26
+
27
+ .swing {
28
+ @include transform-origin(top center);
29
+ @include animation-name(swing);
30
+ }
@@ -0,0 +1,34 @@
1
+ @mixin tada($prefix) {
2
+ 0% { @include transform(scale(1), $prefix); }
3
+ 10% { @include transform(scale(0.9) rotate(-3deg), $prefix); }
4
+ 20% { @include transform(scale(0.9) rotate(-3deg), $prefix); }
5
+ 30% { @include transform(scale(1.1) rotate(3deg), $prefix); }
6
+ 40% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
7
+ 50% { @include transform(scale(1.1) rotate(3deg), $prefix); }
8
+ 60% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
9
+ 70% { @include transform(scale(1.1) rotate(3deg), $prefix); }
10
+ 80% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
11
+ 90% { @include transform(scale(1.1) rotate(3deg), $prefix); }
12
+ 100% { @include transform(scale(1) rotate(0), $prefix); }
13
+ }
14
+
15
+ @if $experimental-support-for-webkit {
16
+ @-webkit-keyframes tada { @include tada(webkit); }
17
+ }
18
+ @if $experimental-support-for-khtml {
19
+ @-khtml-keyframes tada { @include tada(khtml); }
20
+ }
21
+ @if $experimental-support-for-mozilla {
22
+ @-moz-keyframes tada { @include tada(moz); }
23
+ }
24
+ @if $experimental-support-for-microsoft {
25
+ @-ms-keyframes tada { @include tada(ms); }
26
+ }
27
+ @if $experimental-support-for-opera {
28
+ @-o-keyframes tada { @include tada(o); }
29
+ }
30
+ @keyframes tada { @include tada(none); }
31
+
32
+ .tada {
33
+ @include animation-name(tada);
34
+ }
@@ -0,0 +1,32 @@
1
+ // Originally authored by Nick Pettit - https://github.com/nickpettit/glide
2
+
3
+ @mixin wobble($prefix) {
4
+ 0% { @include transform(translateX(0%), $prefix); }
5
+ 15% { @include transform(translateX(-25%) rotate(-5deg), $prefix); }
6
+ 30% { @include transform(translateX(20%) rotate(3deg), $prefix); }
7
+ 45% { @include transform(translateX(-15%) rotate(-3deg), $prefix); }
8
+ 60% { @include transform(translateX(10%) rotate(2deg), $prefix); }
9
+ 75% { @include transform(translateX(-5%) rotate(-1deg), $prefix); }
10
+ 100% { @include transform(translateX(0%), $prefix); }
11
+ }
12
+
13
+ @if $experimental-support-for-webkit {
14
+ @-webkit-keyframes wobble { @include wobble(webkit); }
15
+ }
16
+ @if $experimental-support-for-khtml {
17
+ @-khtml-keyframes wobble { @include wobble(khtml); }
18
+ }
19
+ @if $experimental-support-for-mozilla {
20
+ @-moz-keyframes wobble { @include wobble(moz); }
21
+ }
22
+ @if $experimental-support-for-microsoft {
23
+ @-ms-keyframes wobble { @include wobble(ms); }
24
+ }
25
+ @if $experimental-support-for-opera {
26
+ @-o-keyframes wobble { @include wobble(o); }
27
+ }
28
+ @keyframes wobble { @include wobble(none); }
29
+
30
+ .wobble {
31
+ @include animation-name(wobble);
32
+ }
@@ -0,0 +1,37 @@
1
+ @mixin bounceIn($prefix) {
2
+ 0% {
3
+ opacity: 0;
4
+ @include transform(scale(0.3), $prefix);
5
+ }
6
+ 50% {
7
+ opacity: 1;
8
+ @include transform(scale(1.05), $prefix);
9
+ }
10
+ 70% {
11
+ @include transform(scale(0.9), $prefix);
12
+ }
13
+ 100% {
14
+ @include transform(scale(1), $prefix);
15
+ }
16
+ }
17
+
18
+ @if $experimental-support-for-webkit {
19
+ @-webkit-keyframes bounceIn { @include bounceIn(webkit); }
20
+ }
21
+ @if $experimental-support-for-khtml {
22
+ @-khtml-keyframes bounceIn { @include bounceIn(khtml); }
23
+ }
24
+ @if $experimental-support-for-mozilla {
25
+ @-moz-keyframes bounceIn { @include bounceIn(moz); }
26
+ }
27
+ @if $experimental-support-for-microsoft {
28
+ @-ms-keyframes bounceIn { @include bounceIn(ms); }
29
+ }
30
+ @if $experimental-support-for-opera {
31
+ @-o-keyframes bounceIn { @include bounceIn(o); }
32
+ }
33
+ @keyframes bounceIn { @include bounceIn(none); }
34
+
35
+ .bounceIn {
36
+ @include animation-name(bounceIn);
37
+ }
@@ -0,0 +1,37 @@
1
+ @mixin bounceInDown($prefix) {
2
+ 0% {
3
+ opacity: 0;
4
+ @include transform(translateY(-2000px), $prefix);
5
+ }
6
+ 60% {
7
+ opacity: 1;
8
+ @include transform(translateY(30px), $prefix);
9
+ }
10
+ 80% {
11
+ @include transform(translateY(-10px), $prefix);
12
+ }
13
+ 100% {
14
+ @include transform(translateY(0), $prefix);
15
+ }
16
+ }
17
+
18
+ @if $experimental-support-for-webkit {
19
+ @-webkit-keyframes bounceInDown { @include bounceInDown(webkit); }
20
+ }
21
+ @if $experimental-support-for-khtml {
22
+ @-khtml-keyframes bounceInDown { @include bounceInDown(khtml); }
23
+ }
24
+ @if $experimental-support-for-mozilla {
25
+ @-moz-keyframes bounceInDown { @include bounceInDown(moz); }
26
+ }
27
+ @if $experimental-support-for-microsoft {
28
+ @-ms-keyframes bounceInDown { @include bounceInDown(ms); }
29
+ }
30
+ @if $experimental-support-for-opera {
31
+ @-o-keyframes bounceInDown { @include bounceInDown(o); }
32
+ }
33
+ @keyframes bounceInDown { @include bounceInDown(none); }
34
+
35
+ .bounceInDown {
36
+ @include animation-name(bounceInDown);
37
+ }