Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Massive refactor, completed all animations abstraction, new handling …

…for vendor prefixing, test project in place.
  • Loading branch information...
commit 48af2c3ae12c2b77fa02672bc008af57572049fd 1 parent a6cfb20
@adamstac authored
Showing with 12,388 additions and 1,789 deletions.
  1. +2 −0  Gemfile
  2. +6 −0 Gemfile.lock
  3. +2 −2 README.mdown
  4. +0 −6 stylesheets/_animate-sass.scss
  5. +8 −0 stylesheets/_animate.sass
  6. +35 −0 stylesheets/_animations.scss
  7. +2 −1  stylesheets/_css3.scss
  8. +0 −687 stylesheets/animate/_animations.scss
  9. +7 −0 stylesheets/animations/_attention-seekers.scss
  10. +5 −0 stylesheets/animations/_bouncing-entrances.scss
  11. +5 −0 stylesheets/animations/_bouncing-exits.scss
  12. +12 −0 stylesheets/animations/_fading-entrances.scss
  13. +12 −0 stylesheets/animations/_fading-exits.scss
  14. +5 −0 stylesheets/animations/_flippers.scss
  15. +5 −0 stylesheets/animations/_rotating-entrances.scss
  16. +5 −0 stylesheets/animations/_rotating-exits.scss
  17. +3 −0  stylesheets/animations/_specials.scss
  18. +30 −0 stylesheets/animations/attention-seekers/_bounce.scss
  19. +28 −0 stylesheets/animations/attention-seekers/_flash.scss
  20. +28 −0 stylesheets/animations/attention-seekers/_pulse.scss
  21. +34 −0 stylesheets/animations/attention-seekers/_shake.scss
  22. +30 −0 stylesheets/animations/attention-seekers/_swing.scss
  23. +34 −0 stylesheets/animations/attention-seekers/_tada.scss
  24. +32 −0 stylesheets/animations/attention-seekers/_wobble.scss
  25. +37 −0 stylesheets/animations/bouncing-entrances/_bounceIn.scss
  26. +37 −0 stylesheets/animations/bouncing-entrances/_bounceInDown.scss
  27. +37 −0 stylesheets/animations/bouncing-entrances/_bounceInLeft.scss
  28. +37 −0 stylesheets/animations/bouncing-entrances/_bounceInRight.scss
  29. +37 −0 stylesheets/animations/bouncing-entrances/_bounceInUp.scss
  30. +37 −0 stylesheets/animations/bouncing-exits/_bounceOut.scss
  31. +34 −0 stylesheets/animations/bouncing-exits/_bounceOutDown.scss
  32. +34 −0 stylesheets/animations/bouncing-exits/_bounceOutLeft.scss
  33. +34 −0 stylesheets/animations/bouncing-exits/_bounceOutRight.scss
  34. +34 −0 stylesheets/animations/bouncing-exits/_bounceOutUp.scss
  35. +25 −0 stylesheets/animations/fading-entrances/_fadeIn.scss
  36. +31 −0 stylesheets/animations/fading-entrances/_fadeInDown.scss
  37. +31 −0 stylesheets/animations/fading-entrances/_fadeInDownBig.scss
  38. +31 −0 stylesheets/animations/fading-entrances/_fadeInLeft.scss
  39. +31 −0 stylesheets/animations/fading-entrances/_fadeInLeftBig.scss
  40. +31 −0 stylesheets/animations/fading-entrances/_fadeInRight.scss
  41. +31 −0 stylesheets/animations/fading-entrances/_fadeInRightBig.scss
  42. +31 −0 stylesheets/animations/fading-entrances/_fadeInUp.scss
  43. +31 −0 stylesheets/animations/fading-entrances/_fadeInUpBig.scss
  44. +25 −0 stylesheets/animations/fading-exits/_fadeOut.scss
  45. +31 −0 stylesheets/animations/fading-exits/_fadeOutDown.scss
  46. +31 −0 stylesheets/animations/fading-exits/_fadeOutDownBig.scss
  47. +31 −0 stylesheets/animations/fading-exits/_fadeOutLeft.scss
  48. +31 −0 stylesheets/animations/fading-exits/_fadeOutLeftBig.scss
  49. +31 −0 stylesheets/animations/fading-exits/_fadeOutRight.scss
  50. +31 −0 stylesheets/animations/fading-exits/_fadeOutRightBig.scss
  51. +31 −0 stylesheets/animations/fading-exits/_fadeOutUp.scss
  52. +31 −0 stylesheets/animations/fading-exits/_fadeOutUpBig.scss
  53. +44 −0 stylesheets/animations/flippers/_flip.scss
  54. +38 −0 stylesheets/animations/flippers/_flipInX.scss
  55. +38 −0 stylesheets/animations/flippers/_flipInY.scss
  56. +32 −0 stylesheets/animations/flippers/_flipOutX.scss
  57. +32 −0 stylesheets/animations/flippers/_flipOutY.scss
  58. +33 −0 stylesheets/animations/rotating-entrances/_rotateIn.scss
  59. +33 −0 stylesheets/animations/rotating-entrances/_rotateInDownLeft.scss
  60. +33 −0 stylesheets/animations/rotating-entrances/_rotateInDownRight.scss
  61. +33 −0 stylesheets/animations/rotating-entrances/_rotateInUpLeft.scss
  62. +33 −0 stylesheets/animations/rotating-entrances/_rotateInUpRight.scss
  63. +33 −0 stylesheets/animations/rotating-exits/_rotateOut.scss
  64. +33 −0 stylesheets/animations/rotating-exits/_rotateOutDownLeft.scss
  65. +33 −0 stylesheets/animations/rotating-exits/_rotateOutDownRight.scss
  66. +33 −0 stylesheets/animations/rotating-exits/_rotateOutUpLeft.scss
  67. +33 −0 stylesheets/animations/rotating-exits/_rotateOutUpRight.scss
  68. +48 −0 stylesheets/animations/specials/_hinge.scss
  69. +33 −0 stylesheets/animations/specials/_rollIn.scss
  70. +33 −0 stylesheets/animations/specials/_rollOut.scss
  71. +17 −118 stylesheets/css3/_animation.scss
  72. +14 −0 stylesheets/css3/_backface-visibility.scss
  73. +10 −46 stylesheets/css3/_transform.scss
  74. +18 −0 stylesheets/css3/animation/_animation-delay.scss
  75. +18 −0 stylesheets/css3/animation/_animation-direction.scss
  76. +17 −0 stylesheets/css3/animation/_animation-duration.scss
  77. +18 −0 stylesheets/css3/animation/_animation-fill-mode.scss
  78. +18 −0 stylesheets/css3/animation/_animation-iteration-count.scss
  79. +18 −0 stylesheets/css3/animation/_animation-name.scss
  80. +18 −0 stylesheets/css3/animation/_animation-play-state.scss
  81. +18 −0 stylesheets/css3/animation/_animation-timing-function.scss
  82. +6 −4 stylesheets/helpers/_mixins.scss
  83. +3 −0  test/config.rb
  84. +4,037 −903 test/public/stylesheets/stylesheet.css
  85. +6,074 −0 test/public/stylesheets/test.css
  86. +64 −17 test/sass/stylesheet.scss
  87. +27 −0 test/sass/test.scss
  88. +129 −4 test/views/index.haml
  89. +2 −1  test/views/layouts/application.haml
View
2  Gemfile
@@ -11,5 +11,7 @@ group :serve do
gem 'serve', '~> 1.5.1'
gem 'haml', '~> 3.1.3'
gem 'css_parser', '~> 1.2.5'
+ gem 'grid-coordinates'
+ gem 'font-stacks'
gem 'maruku', '~> 0.6.0'
end
View
6 Gemfile.lock
@@ -11,7 +11,11 @@ GEM
sass (~> 3.1)
css_parser (1.2.5)
addressable
+ font-stacks (0.1.4)
+ compass (>= 0.11.5)
fssm (0.2.7)
+ grid-coordinates (1.2.0)
+ compass (>= 0.11.5)
haml (3.1.3)
heroku (2.7.0)
launchy (>= 0.3.2)
@@ -51,6 +55,8 @@ PLATFORMS
DEPENDENCIES
compass (~> 0.11.5)
css_parser (~> 1.2.5)
+ font-stacks
+ grid-coordinates
haml (~> 3.1.3)
heroku
maruku (~> 0.6.0)
View
4 README.mdown
@@ -8,7 +8,7 @@ The core of Animate.sass, despite being named "dot sass", is written in [SCSS](h
1. `gem install animate-sass`
2. Add `require 'animate-sass'` in Compass's `config.rb` file
-3. Then `@import animate-sass`
+3. Then `@import animate.sass`
## Usage
@@ -16,7 +16,7 @@ The usage is simple, `@import animate-sass` and have fun. Thus far, Animate.sass
## Credits and special thanks
-Special thanks to [theCSSguru](https://twitter.com/theCSSguru) for the kickstart on this project. He has [a page out there](http://thecssguru.freeiz.com/animate/) linking to a simple Sass conversion of Animate.css, but I wanted to do more with it for myself as well as the Sass community. Since it wasn't hosted on GitHub, I took the liberty to start Animate.sass and begin carving it out.
+Special thanks to [theCSSguru](https://twitter.com/theCSSguru) for kickstarting a Sass port of Animate.css. He has [a page out there](http://thecssguru.freeiz.com/animate/) linking to a simple Sass conversion of Animate.css, but I wanted to do a lot more with it for the Sass community. Since it wasn't hosted on GitHub, I took the liberty to start Animate.sass and begin carving it out.
## License
View
6 stylesheets/_animate-sass.scss
@@ -1,6 +0,0 @@
-// The goods.
-@import "helpers";
-@import "css3";
-
-// The animations.
-@import "animate/animations";
View
8 stylesheets/_animate.sass
@@ -0,0 +1,8 @@
+// This file was intentionally written in Sass.
+
+// The goods.
+@import helpers
+@import css3
+
+// The animations.
+@import animations
View
35 stylesheets/_animations.scss
@@ -0,0 +1,35 @@
+// Attention seekers
+// flash bounce shake tada swing wobble pulse
+@import "animations/attention-seekers";
+
+// Fading entrances
+// fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
+@import "animations/fading-entrances";
+
+// Fading exits
+// fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
+@import "animations/fading-exits";
+
+// Bouncing entrances
+// bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
+@import "animations/bouncing-entrances";
+
+// Bouncing exits
+// bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
+@import "animations/bouncing-exits";
+
+// Rotating entrances
+// rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
+@import "animations/rotating-entrances";
+
+// Rotating exits
+// rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
+@import "animations/rotating-exits";
+
+// Specials
+// hinge rollIn rollOut
+@import "animations/specials";
+
+// Flippers
+// flip flipInX flipOutX flipInY flipOutY
+@import "animations/flippers";
View
3  stylesheets/_css3.scss
@@ -1,2 +1,3 @@
@import "css3/animation";
-@import "css3/transform";
+@import "css3/transform";
+@import "css3/backface-visibility";
View
687 stylesheets/animate/_animations.scss
@@ -1,687 +0,0 @@
-@mixin fadeIn {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
-}
-
-@-webkit-keyframes fadeIn { @include fadeIn; }
- @-moz-keyframes fadeIn { @include fadeIn; }
- @keyframes fadeIn { @include fadeIn; }
-
-@mixin fadeOut {
- 0% { opacity: 1; }
- 100% { opacity: 0; }
-}
-
-@-webkit-keyframes fadeOut { @include fadeOut; }
- @-moz-keyframes fadeOut { @include fadeOut; }
- @keyframes fadeOut { @include fadeOut; }
-
-@mixin fadeInUp($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateY(20px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInUp { @include fadeInUp(webkit); }
- @-moz-keyframes fadeInUp { @include fadeInUp(moz); }
- @keyframes fadeInUp { @include fadeInUp(none); }
-
-@mixin fadeOutUp($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateY(-20px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutUp { @include fadeOutUp(webkit); }
- @-moz-keyframes fadeOutUp { @include fadeOutUp(moz); }
- @keyframes fadeOutUp { @include fadeOutUp(none); }
-
-@mixin fadeInDown($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateY(-20px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInDown { @include fadeInDown(webkit); }
- @-moz-keyframes fadeInDown { @include fadeInDown(moz); }
- @keyframes fadeInDown { @include fadeInDown(none); }
-
-@mixin fadeOutDown($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateY(20px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutDown { @include fadeOutDown(webkit); }
- @-moz-keyframes fadeOutDown { @include fadeOutDown(moz); }
- @keyframes fadeOutDown { @include fadeOutDown(none); }
-
-@mixin fadeInRight($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateX(20px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInRight { @include fadeInRight(webkit); }
- @-moz-keyframes fadeInRight { @include fadeInRight(moz); }
- @keyframes fadeInRight { @include fadeInRight(none); }
-
-@mixin fadeOutLeft($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateX(-20px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutLeft { @include fadeOutLeft(webkit); }
- @-moz-keyframes fadeOutLeft { @include fadeOutLeft(moz); }
- @keyframes fadeOutLeft { @include fadeOutLeft(none); }
-
-@mixin fadeInLeft($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateX(-20px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInLeft { @include fadeInLeft(webkit); }
- @-moz-keyframes fadeInLeft { @include fadeInLeft(moz); }
- @keyframes fadeInLeft { @include fadeInLeft(none); }
-
-@mixin fadeOutRight($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateX(20px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutRight { @include fadeOutRight(webkit); }
- @-moz-keyframes fadeOutRight { @include fadeOutRight(moz); }
- @keyframes fadeOutRight { @include fadeOutRight(none); }
-
-@mixin fadeInUpBig($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateY(2000px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInUpBig { @include fadeInUpBig(webkit); }
- @-moz-keyframes fadeInUpBig { @include fadeInUpBig(moz); }
- @keyframes fadeInUpBig { @include fadeInUpBig(none); }
-
-@mixin fadeOutUpBig($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateY(-2000px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutUpBig { @include fadeOutUpBig(webkit); }
- @-moz-keyframes fadeOutUpBig { @include fadeOutUpBig(moz); }
- @keyframes fadeOutUpBig { @include fadeOutUpBig(none); }
-
-@mixin fadeInDownBig($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateY(-2000px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInDownBig { @include fadeInDownBig(webkit); }
- @-moz-keyframes fadeInDownBig { @include fadeInDownBig(moz); }
- @keyframes fadeInDownBig { @include fadeInDownBig(none); }
-
-@mixin fadeOutDownBig($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateY(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateY(2000px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutDownBig { @include fadeOutDownBig(webkit); }
- @-moz-keyframes fadeOutDownBig { @include fadeOutDownBig(moz); }
- @keyframes fadeOutDownBig { @include fadeOutDownBig(none); }
-
-@mixin fadeInRightBig($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateX(2000px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInRightBig { @include fadeInRightBig(webkit); }
- @-moz-keyframes fadeInRightBig { @include fadeInRightBig(moz); }
- @keyframes fadeInRightBig { @include fadeInRightBig(none); }
-
-@mixin fadeOutLeftBig($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateX(-2000px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutLeftBig { @include fadeOutLeftBig(webkit); }
- @-moz-keyframes fadeOutLeftBig { @include fadeOutLeftBig(moz); }
- @keyframes fadeOutLeftBig { @include fadeOutLeftBig(none); }
-
-@mixin fadeInLeftBig($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateX(-2000px), $prefix);
- }
- 100% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
-}
-
-@-webkit-keyframes fadeInLeftBig { @include fadeInLeftBig(webkit); }
- @-moz-keyframes fadeInLeftBig { @include fadeInLeftBig(moz); }
- @keyframes fadeInLeftBig { @include fadeInLeftBig(none); }
-
-@mixin fadeOutRightBig($prefix) {
- 0% {
- opacity: 1;
- @include transform(translateX(0), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateX(2000px), $prefix);
- }
-}
-
-@-webkit-keyframes fadeOutRightBig { @include fadeOutRightBig(webkit); }
- @-moz-keyframes fadeOutRightBig { @include fadeOutRightBig(moz); }
- @keyframes fadeOutRightBig { @include fadeOutRightBig(none); }
-
-@mixin bounceIn($prefix) {
- 0% {
- opacity: 0;
- @include transform(scale(0.3), $prefix);
- }
- 50% {
- opacity: 1;
- @include transform(scale(1.05), $prefix);
- }
- 70% {
- @include transform(scale(0.9), $prefix);
- }
- 100% {
- @include transform(scale(1), $prefix);
- }
-}
-
-@-webkit-keyframes bounceIn { @include bounceIn(webkit); }
- @-moz-keyframes bounceIn { @include bounceIn(moz); }
- @keyframes bounceIn { @include bounceIn(none); }
-
-@mixin bounceInDown($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateY(-2000px), $prefix);
- }
- 60% {
- opacity: 1;
- @include transform(translateY(30px), $prefix);
- }
- 80% {
- @include transform(translateY(-10px), $prefix);
- }
- 100% {
- @include transform(translateY(0), $prefix);
- }
-}
-
-@-webkit-keyframes bounceInDown { @include bounceInDown(webkit); }
- @-moz-keyframes bounceInDown { @include bounceInDown(moz); }
- @keyframes bounceInDown { @include bounceInDown(none); }
-
-@mixin bounceInUp($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateY(2000px), $prefix);
- }
- 60% {
- opacity: 1;
- @include transform(translateY(-30px), $prefix);
- }
- 80% {
- @include transform(translateY(10px), $prefix);
- }
- 100% {
- @include transform(translateY(0), $prefix);
- }
-}
-
-@-webkit-keyframes bounceInUp { @include bounceInUp(webkit); }
- @-moz-keyframes bounceInUp { @include bounceInUp(moz); }
- @keyframes bounceInUp { @include bounceInUp(none); }
-
-@mixin bounceInRight($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateX(2000px), $prefix);
- }
- 60% {
- opacity: 1;
- @include transform(translateX(-30px), $prefix);
- }
- 80% {
- @include transform(translateX(10px), $prefix);
- }
- 100% {
- @include transform(translateX(0), $prefix);
- }
-}
-
-@-webkit-keyframes bounceInRight { @include bounceInRight(webkit); }
- @-moz-keyframes bounceInRight { @include bounceInRight(moz); }
- @keyframes bounceInRight { @include bounceInRight(none); }
-
-@mixin bounceInLeft($prefix) {
- 0% {
- opacity: 0;
- @include transform(translateX(-2000px), $prefix);
- }
- 60% {
- opacity: 1;
- @include transform(translateX(30px), $prefix);
- }
- 80% {
- @include transform(translateX(-10px), $prefix);
- }
- 100% {
- @include transform(translateX(0), $prefix);
- }
-}
-
-@-webkit-keyframes bounceInLeft { @include bounceInLeft(webkit); }
- @-moz-keyframes bounceInLeft { @include bounceInLeft(moz); }
- @keyframes bounceInLeft { @include bounceInLeft(none); }
-
-@mixin bounceOut($prefix) {
- 0% {
- @include transform(scale(1), $prefix);
- }
- 25% {
- @include transform(scale(0.95), $prefix);
- }
- 50% {
- opacity: 1;
- @include transform(scale(1.1), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(scale(0.3), $prefix);
- }
-}
-
-@-webkit-keyframes bounceOut { @include bounceOut(webkit); }
- @-moz-keyframes bounceOut { @include bounceOut(moz); }
- @keyframes bounceOut { @include bounceOut(none); }
-
-@mixin bounceOutUp($prefix) {
- 0% {
- @include transform(translateY(0), $prefix);
- }
- 20% {
- opacity: 1;
- @include transform(translateY(20px), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateY(-2000px), $prefix);
- }
-}
-
-@-webkit-keyframes bounceOutUp { @include bounceOutUp(webkit); }
- @-moz-keyframes bounceOutUp { @include bounceOutUp(moz); }
- @keyframes bounceOutUp { @include bounceOutUp(none); }
-
-@mixin bounceOutDown($prefix) {
- 0% {
- @include transform(translateY(0), $prefix);
- }
- 20% {
- opacity: 1;
- @include transform(translateY(-20px), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateY(2000px), $prefix);
- }
-}
-
-@-webkit-keyframes bounceOutDown { @include bounceOutDown(webkit); }
- @-moz-keyframes bounceOutDown { @include bounceOutDown(moz); }
- @keyframes bounceOutDown { @include bounceOutDown(none); }
-
-@mixin bounceOutLeft($prefix) {
- 0% {
- @include transform(translateX(0), $prefix);
- }
- 20% {
- opacity: 1;
- @include transform(translateX(20px), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateX(-2000px), $prefix);
- }
-}
-
-@-webkit-keyframes bounceOutLeft { @include bounceOutLeft(webkit); }
- @-moz-keyframes bounceOutLeft { @include bounceOutLeft(moz); }
- @keyframes bounceOutLeft { @include bounceOutLeft(none); }
-
-@mixin bounceOutRight($prefix) {
- 0% {
- @include transform(translateX(0), $prefix);
- }
- 20% {
- opacity: 1;
- @include transform(translateX(-20px), $prefix);
- }
- 100% {
- opacity: 0;
- @include transform(translateX(2000px), $prefix);
- }
-}
-
-@-webkit-keyframes bounceOutRight { @include bounceOutRight(webkit); }
- @-moz-keyframes bounceOutRight { @include bounceOutRight(moz); }
- @keyframes bounceOutRight { @include bounceOutRight(none); }
-
-@mixin flash {
- 0% { opacity: 1; }
- 25% { opacity: 0; }
- 50% { opacity: 1; }
- 75% { opacity: 0; }
- 100% { opacity: 1; }
-}
-
-@-webkit-keyframes flash { @include flash; }
- @-moz-keyframes flash { @include flash; }
- @keyframes flash { @include flash; }
-
-@mixin bounce($prefix) {
- 0% { @include transform(translateY(0), $prefix); }
- 20% { @include transform(translateY(0), $prefix); }
- 40% { @include transform(translateY(-30px), $prefix); }
- 50% { @include transform(translateY(0), $prefix); }
- 60% { @include transform(translateY(-15px), $prefix); }
- 80% { @include transform(translateY(0), $prefix); }
- 100% { @include transform(translateY(0), $prefix); }
-}
-
-@-webkit-keyframes bounce { @include bounce(webkit); }
- @-moz-keyframes bounce { @include bounce(moz); }
- @keyframes bounce { @include bounce(none); }
-
-@mixin shake($prefix) {
- 0% { @include transform(translateX(0), $prefix); }
- 10% { @include transform(translateX(-10px), $prefix); }
- 20% { @include transform(translateX(10px), $prefix); }
- 30% { @include transform(translateX(-10px), $prefix); }
- 40% { @include transform(translateX(10px), $prefix); }
- 50% { @include transform(translateX(-10px), $prefix); }
- 60% { @include transform(translateX(10px), $prefix); }
- 70% { @include transform(translateX(-10px), $prefix); }
- 80% { @include transform(translateX(10px), $prefix); }
- 90% { @include transform(translateX(-10px), $prefix); }
- 100% { @include transform(translateX(0), $prefix); }
-}
-
-@-webkit-keyframes shake { @include shake(webkit); }
- @-moz-keyframes shake { @include shake(moz); }
- @keyframes shake { @include shake(none); }
-
-@mixin rotateInDownLeft($prefix) {
- 0% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(-90deg), $prefix);
- opacity: 0;
- }
- 100% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes rotateInDownLeft { @include rotateInDownLeft(webkit); }
- @-moz-keyframes rotateInDownLeft { @include rotateInDownLeft(moz); }
- @keyframes rotateInDownLeft { @include rotateInDownLeft(none); }
-
-@mixin rotateInUpLeft($prefix) {
- 0% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(90deg), $prefix);
- opacity: 0;
- }
- 100% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes rotateInUpLeft { @include rotateInUpLeft(webkit); }
- @-moz-keyframes rotateInUpLeft { @include rotateInUpLeft(moz); }
- @keyframes rotateInUpLeft { @include rotateInUpLeft(none); }
-
-@mixin rotateInUpRight($prefix) {
- 0% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(-90deg), $prefix);
- opacity: 0;
- }
- 100% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes rotateInUpRight { @include rotateInUpRight(webkit); }
- @-moz-keyframes rotateInUpRight { @include rotateInUpRight(moz); }
- @keyframes rotateInUpRight { @include rotateInUpRight(none); }
-
-@mixin rotateInDownRight($prefix) {
- 0% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(90deg), $prefix);
- opacity: 0;
- }
- 100% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes rotateInDownRight { @include rotateInDownRight(webkit); }
- @-moz-keyframes rotateInDownRight { @include rotateInDownRight(moz); }
- @keyframes rotateInDownRight { @include rotateInDownRight(none); }
-
-@mixin rotateOutDownLeft($prefix) {
- 0% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
- 100% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(90deg), $prefix);
- opacity: 0;
- }
-}
-
-@-webkit-keyframes rotateOutDownLeft { @include rotateOutDownLeft(webkit); }
- @-moz-keyframes rotateOutDownLeft { @include rotateOutDownLeft(moz); }
- @keyframes rotateOutDownLeft { @include rotateOutDownLeft(none); }
-
-@mixin rotateOutUpLeft($prefix) {
- 0% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
- 100% {
- @include transform-origin(left bottom, $prefix);
- @include transform(rotate(-90deg), $prefix);
- opacity: 0;
- }
-}
-
-@-webkit-keyframes rotateOutUpLeft { @include rotateOutUpLeft(webkit); }
- @-moz-keyframes rotateOutUpLeft { @include rotateOutUpLeft(moz); }
- @keyframes rotateOutUpLeft { @include rotateOutUpLeft(none); }
-
-@mixin rotateOutDownRight($prefix) {
- 0% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
- 100% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(-90deg), $prefix);
- opacity: 0;
- }
-}
-
-@-webkit-keyframes rotateOutDownRight { @include rotateOutDownRight(webkit); }
- @-moz-keyframes rotateOutDownRight { @include rotateOutDownRight(moz); }
- @keyframes rotateOutDownRight { @include rotateOutDownRight(none); }
-
-@mixin rotateOutUpRight($prefix) {
- 0% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
- 100% {
- @include transform-origin(right bottom, $prefix);
- @include transform(rotate(90deg), $prefix);
- opacity: 0;
- }
-}
-
-@-webkit-keyframes rotateOutUpRight { @include rotateOutUpRight(webkit); }
- @-moz-keyframes rotateOutUpRight { @include rotateOutUpRight(moz); }
- @keyframes rotateOutUpRight { @include rotateOutUpRight(none); }
-
-@mixin rotateIn($prefix) {
- 0% {
- @include transform-origin(center center, $prefix);
- @include transform(rotate(-200deg), $prefix);
- opacity: 0;
- }
- 100% {
- @include transform-origin(center center, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes rotateIn { @include rotateIn(webkit); }
- @-moz-keyframes rotateIn { @include rotateIn(moz); }
- @keyframes rotateIn { @include rotateIn(none); }
-
-@mixin rotateOut($prefix) {
- 0% {
- @include transform-origin(center center, $prefix);
- @include transform(rotate(0), $prefix);
- opacity: 1;
- }
- 100% {
- @include transform-origin(center center, $prefix);
- @include transform(rotate(200deg), $prefix);
- opacity: 0;
- }
-}
-
-@-webkit-keyframes rotateOut { @include rotateOut(webkit); }
- @-moz-keyframes rotateOut { @include rotateOut(moz); }
- @keyframes rotateOut { @include rotateOut(none); }
-
-@mixin tada($prefix) {
- 0% { @include transform(scale(1), $prefix); }
- 10% { @include transform(scale(0.9) rotate(-3deg), $prefix); }
- 20% { @include transform(scale(0.9) rotate(-3deg), $prefix); }
- 30% { @include transform(scale(1.1) rotate(3deg), $prefix); }
- 40% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
- 50% { @include transform(scale(1.1) rotate(3deg), $prefix); }
- 60% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
- 70% { @include transform(scale(1.1) rotate(3deg), $prefix); }
- 80% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
- 90% { @include transform(scale(1.1) rotate(3deg), $prefix); }
- 100% { @include transform(scale(1) rotate(0), $prefix); }
-}
-
-@-webkit-keyframes tada { @include tada(webkit); }
- @-moz-keyframes tada { @include tada(moz); }
- @keyframes tada { @include tada(none); }
View
7 stylesheets/animations/_attention-seekers.scss
@@ -0,0 +1,7 @@
+@import "attention-seekers/flash";
+@import "attention-seekers/bounce";
+@import "attention-seekers/shake";
+@import "attention-seekers/tada";
+@import "attention-seekers/swing";
+@import "attention-seekers/wobble";
+@import "attention-seekers/pulse";
View
5 stylesheets/animations/_bouncing-entrances.scss
@@ -0,0 +1,5 @@
+@import "bouncing-entrances/bounceIn";
+@import "bouncing-entrances/bounceInDown";
+@import "bouncing-entrances/bounceInUp";
+@import "bouncing-entrances/bounceInLeft";
+@import "bouncing-entrances/bounceInRight";
View
5 stylesheets/animations/_bouncing-exits.scss
@@ -0,0 +1,5 @@
+@import "bouncing-exits/bounceOut";
+@import "bouncing-exits/bounceOutDown";
+@import "bouncing-exits/bounceOutUp";
+@import "bouncing-exits/bounceOutLeft";
+@import "bouncing-exits/bounceOutRight";
View
12 stylesheets/animations/_fading-entrances.scss
@@ -0,0 +1,12 @@
+// Normal
+@import "fading-entrances/fadeIn";
+@import "fading-entrances/fadeInUp";
+@import "fading-entrances/fadeInDown";
+@import "fading-entrances/fadeInLeft";
+@import "fading-entrances/fadeInRight";
+
+// Big
+@import "fading-entrances/fadeInUpBig";
+@import "fading-entrances/fadeInDownBig";
+@import "fading-entrances/fadeInLeftBig";
+@import "fading-entrances/fadeInRightBig";
View
12 stylesheets/animations/_fading-exits.scss
@@ -0,0 +1,12 @@
+// Normal
+@import "fading-exits/fadeOut";
+@import "fading-exits/fadeOutUp";
+@import "fading-exits/fadeOutDown";
+@import "fading-exits/fadeOutLeft";
+@import "fading-exits/fadeOutRight";
+
+// Big
+@import "fading-exits/fadeOutUpBig";
+@import "fading-exits/fadeOutDownBig";
+@import "fading-exits/fadeOutLeftBig";
+@import "fading-exits/fadeOutRightBig";
View
5 stylesheets/animations/_flippers.scss
@@ -0,0 +1,5 @@
+@import "flippers/flip";
+@import "flippers/flipInX";
+@import "flippers/flipOutX";
+@import "flippers/flipInY";
+@import "flippers/flipOutY";
View
5 stylesheets/animations/_rotating-entrances.scss
@@ -0,0 +1,5 @@
+@import "rotating-entrances/rotateIn";
+@import "rotating-entrances/rotateInDownLeft";
+@import "rotating-entrances/rotateInDownRight";
+@import "rotating-entrances/rotateInUpLeft";
+@import "rotating-entrances/rotateInUpRight";
View
5 stylesheets/animations/_rotating-exits.scss
@@ -0,0 +1,5 @@
+@import "rotating-exits/rotateOut";
+@import "rotating-exits/rotateOutDownLeft";
+@import "rotating-exits/rotateOutDownRight";
+@import "rotating-exits/rotateOutUpLeft";
+@import "rotating-exits/rotateOutUpRight";
View
3  stylesheets/animations/_specials.scss
@@ -0,0 +1,3 @@
+@import "specials/hinge";
+@import "specials/rollIn";
+@import "specials/rollOut";
View
30 stylesheets/animations/attention-seekers/_bounce.scss
@@ -0,0 +1,30 @@
+@mixin bounce($prefix) {
+ 0% { @include transform(translateY(0), $prefix); }
+ 20% { @include transform(translateY(0), $prefix); }
+ 40% { @include transform(translateY(-30px), $prefix); }
+ 50% { @include transform(translateY(0), $prefix); }
+ 60% { @include transform(translateY(-15px), $prefix); }
+ 80% { @include transform(translateY(0), $prefix); }
+ 100% { @include transform(translateY(0), $prefix); }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounce { @include bounce(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounce { @include bounce(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounce { @include bounce(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounce { @include bounce(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounce { @include bounce(o); }
+}
+@keyframes bounce { @include bounce(none); }
+
+.bounce {
+ @include animation-name(bounce);
+}
View
28 stylesheets/animations/attention-seekers/_flash.scss
@@ -0,0 +1,28 @@
+@mixin flash {
+ 0% { opacity: 1; }
+ 25% { opacity: 0; }
+ 50% { opacity: 1; }
+ 75% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes flash { @include flash; }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes flash { @include flash; }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes flash { @include flash; }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes flash { @include flash; }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes flash { @include flash; }
+}
+@keyframes flash { @include flash; }
+
+.flash {
+ @include animation-name(flash);
+}
View
28 stylesheets/animations/attention-seekers/_pulse.scss
@@ -0,0 +1,28 @@
+// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+@mixin pulse($prefix) {
+ 0% { @include transform(scale(1), $prefix); }
+ 50% { @include transform(scale(1.1), $prefix); }
+ 100% { @include transform(scale(1), $prefix); }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes pulse { @include pulse(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes pulse { @include pulse(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes pulse { @include pulse(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes pulse { @include pulse(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes pulse { @include pulse(o); }
+}
+@keyframes pulse { @include pulse(none); }
+
+.pulse {
+ @include animation-name(pulse);
+}
View
34 stylesheets/animations/attention-seekers/_shake.scss
@@ -0,0 +1,34 @@
+@mixin shake($prefix) {
+ 0% { @include transform(translateX(0), $prefix); }
+ 10% { @include transform(translateX(-10px), $prefix); }
+ 20% { @include transform(translateX(10px), $prefix); }
+ 30% { @include transform(translateX(-10px), $prefix); }
+ 40% { @include transform(translateX(10px), $prefix); }
+ 50% { @include transform(translateX(-10px), $prefix); }
+ 60% { @include transform(translateX(10px), $prefix); }
+ 70% { @include transform(translateX(-10px), $prefix); }
+ 80% { @include transform(translateX(10px), $prefix); }
+ 90% { @include transform(translateX(-10px), $prefix); }
+ 100% { @include transform(translateX(0), $prefix); }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes shake { @include shake(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes shake { @include shake(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes shake { @include shake(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes shake { @include shake(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes shake { @include shake(o); }
+}
+@keyframes shake { @include shake(none); }
+
+.shake {
+ @include animation-name(shake);
+}
View
30 stylesheets/animations/attention-seekers/_swing.scss
@@ -0,0 +1,30 @@
+@mixin swing($prefix) {
+ 20%, 40%, 60%, 80%, 100% { @include transform-origin(top center, $prefix); }
+ 20% { @include transform(rotate(15deg), $prefix); }
+ 40% { @include transform(rotate(-10deg), $prefix); }
+ 60% { @include transform(rotate(5deg), $prefix); }
+ 80% { @include transform(rotate(-5deg), $prefix); }
+ 100% { @include transform(rotate(0deg), $prefix); }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes swing { @include swing(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes swing { @include swing(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes swing { @include swing(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes swing { @include swing(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes swing { @include swing(o); }
+}
+@keyframes swing { @include swing(none); }
+
+.swing {
+ @include transform-origin(top center);
+ @include animation-name(swing);
+}
View
34 stylesheets/animations/attention-seekers/_tada.scss
@@ -0,0 +1,34 @@
+@mixin tada($prefix) {
+ 0% { @include transform(scale(1), $prefix); }
+ 10% { @include transform(scale(0.9) rotate(-3deg), $prefix); }
+ 20% { @include transform(scale(0.9) rotate(-3deg), $prefix); }
+ 30% { @include transform(scale(1.1) rotate(3deg), $prefix); }
+ 40% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
+ 50% { @include transform(scale(1.1) rotate(3deg), $prefix); }
+ 60% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
+ 70% { @include transform(scale(1.1) rotate(3deg), $prefix); }
+ 80% { @include transform(scale(1.1) rotate(-3deg), $prefix); }
+ 90% { @include transform(scale(1.1) rotate(3deg), $prefix); }
+ 100% { @include transform(scale(1) rotate(0), $prefix); }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes tada { @include tada(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes tada { @include tada(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes tada { @include tada(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes tada { @include tada(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes tada { @include tada(o); }
+}
+@keyframes tada { @include tada(none); }
+
+.tada {
+ @include animation-name(tada);
+}
View
32 stylesheets/animations/attention-seekers/_wobble.scss
@@ -0,0 +1,32 @@
+// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+@mixin wobble($prefix) {
+ 0% { @include transform(translateX(0%), $prefix); }
+ 15% { @include transform(translateX(-25%) rotate(-5deg), $prefix); }
+ 30% { @include transform(translateX(20%) rotate(3deg), $prefix); }
+ 45% { @include transform(translateX(-15%) rotate(-3deg), $prefix); }
+ 60% { @include transform(translateX(10%) rotate(2deg), $prefix); }
+ 75% { @include transform(translateX(-5%) rotate(-1deg), $prefix); }
+ 100% { @include transform(translateX(0%), $prefix); }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes wobble { @include wobble(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes wobble { @include wobble(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes wobble { @include wobble(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes wobble { @include wobble(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes wobble { @include wobble(o); }
+}
+@keyframes wobble { @include wobble(none); }
+
+.wobble {
+ @include animation-name(wobble);
+}
View
37 stylesheets/animations/bouncing-entrances/_bounceIn.scss
@@ -0,0 +1,37 @@
+@mixin bounceIn($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(scale(0.3), $prefix);
+ }
+ 50% {
+ opacity: 1;
+ @include transform(scale(1.05), $prefix);
+ }
+ 70% {
+ @include transform(scale(0.9), $prefix);
+ }
+ 100% {
+ @include transform(scale(1), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceIn { @include bounceIn(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceIn { @include bounceIn(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceIn { @include bounceIn(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceIn { @include bounceIn(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceIn { @include bounceIn(o); }
+}
+@keyframes bounceIn { @include bounceIn(none); }
+
+.bounceIn {
+ @include animation-name(bounceIn);
+}
View
37 stylesheets/animations/bouncing-entrances/_bounceInDown.scss
@@ -0,0 +1,37 @@
+@mixin bounceInDown($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateY(-2000px), $prefix);
+ }
+ 60% {
+ opacity: 1;
+ @include transform(translateY(30px), $prefix);
+ }
+ 80% {
+ @include transform(translateY(-10px), $prefix);
+ }
+ 100% {
+ @include transform(translateY(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceInDown { @include bounceInDown(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceInDown { @include bounceInDown(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceInDown { @include bounceInDown(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceInDown { @include bounceInDown(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceInDown { @include bounceInDown(o); }
+}
+@keyframes bounceInDown { @include bounceInDown(none); }
+
+.bounceInDown {
+ @include animation-name(bounceInDown);
+}
View
37 stylesheets/animations/bouncing-entrances/_bounceInLeft.scss
@@ -0,0 +1,37 @@
+@mixin bounceInLeft($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateX(-2000px), $prefix);
+ }
+ 60% {
+ opacity: 1;
+ @include transform(translateX(30px), $prefix);
+ }
+ 80% {
+ @include transform(translateX(-10px), $prefix);
+ }
+ 100% {
+ @include transform(translateX(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceInLeft { @include bounceInLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceInLeft { @include bounceInLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceInLeft { @include bounceInLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceInLeft { @include bounceInLeft(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceInLeft { @include bounceInLeft(o); }
+}
+@keyframes bounceInLeft { @include bounceInLeft(none); }
+
+.bounceInLeft {
+ @include animation-name(bounceInLeft);
+}
View
37 stylesheets/animations/bouncing-entrances/_bounceInRight.scss
@@ -0,0 +1,37 @@
+@mixin bounceInRight($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateX(2000px), $prefix);
+ }
+ 60% {
+ opacity: 1;
+ @include transform(translateX(-30px), $prefix);
+ }
+ 80% {
+ @include transform(translateX(10px), $prefix);
+ }
+ 100% {
+ @include transform(translateX(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceInRight { @include bounceInRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceInRight { @include bounceInRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceInRight { @include bounceInRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceInRight { @include bounceInRight(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceInRight { @include bounceInRight(o); }
+}
+@keyframes bounceInRight { @include bounceInRight(none); }
+
+.bounceInRight {
+ @include animation-name(bounceInRight);
+}
View
37 stylesheets/animations/bouncing-entrances/_bounceInUp.scss
@@ -0,0 +1,37 @@
+@mixin bounceInUp($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateY(2000px), $prefix);
+ }
+ 60% {
+ opacity: 1;
+ @include transform(translateY(-30px), $prefix);
+ }
+ 80% {
+ @include transform(translateY(10px), $prefix);
+ }
+ 100% {
+ @include transform(translateY(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceInUp { @include bounceInUp(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceInUp { @include bounceInUp(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceInUp { @include bounceInUp(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceInUp { @include bounceInUp(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceInUp { @include bounceInUp(o); }
+}
+@keyframes bounceInUp { @include bounceInUp(none); }
+
+.bounceInUp {
+ @include animation-name(bounceInUp);
+}
View
37 stylesheets/animations/bouncing-exits/_bounceOut.scss
@@ -0,0 +1,37 @@
+@mixin bounceOut($prefix) {
+ 0% {
+ @include transform(scale(1), $prefix);
+ }
+ 25% {
+ @include transform(scale(0.95), $prefix);
+ }
+ 50% {
+ opacity: 1;
+ @include transform(scale(1.1), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(scale(0.3), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceOut { @include bounceOut(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceOut { @include bounceOut(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceOut { @include bounceOut(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceOut { @include bounceOut(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceOut { @include bounceOut(o); }
+}
+@keyframes bounceOut { @include bounceOut(none); }
+
+.bounceOut {
+ @include animation-name(bounceOut);
+}
View
34 stylesheets/animations/bouncing-exits/_bounceOutDown.scss
@@ -0,0 +1,34 @@
+@mixin bounceOutDown($prefix) {
+ 0% {
+ @include transform(translateY(0), $prefix);
+ }
+ 20% {
+ opacity: 1;
+ @include transform(translateY(-20px), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateY(2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceOutDown { @include bounceOutDown(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceOutDown { @include bounceOutDown(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceOutDown { @include bounceOutDown(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceOutDown { @include bounceOutDown(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceOutDown { @include bounceOutDown(o); }
+}
+@keyframes bounceOutDown { @include bounceOutDown(none); }
+
+.bounceOutDown {
+ @include animation-name(bounceOutDown);
+}
View
34 stylesheets/animations/bouncing-exits/_bounceOutLeft.scss
@@ -0,0 +1,34 @@
+@mixin bounceOutLeft($prefix) {
+ 0% {
+ @include transform(translateX(0), $prefix);
+ }
+ 20% {
+ opacity: 1;
+ @include transform(translateX(20px), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateX(-2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceOutLeft { @include bounceOutLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceOutLeft { @include bounceOutLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceOutLeft { @include bounceOutLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceOutLeft { @include bounceOutLeft(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceOutLeft { @include bounceOutLeft(o); }
+}
+@keyframes bounceOutLeft { @include bounceOutLeft(none); }
+
+.bounceOutLeft {
+ @include animation-name(bounceOutLeft);
+}
View
34 stylesheets/animations/bouncing-exits/_bounceOutRight.scss
@@ -0,0 +1,34 @@
+@mixin bounceOutRight($prefix) {
+ 0% {
+ @include transform(translateX(0), $prefix);
+ }
+ 20% {
+ opacity: 1;
+ @include transform(translateX(-20px), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateX(2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceOutRight { @include bounceOutRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceOutRight { @include bounceOutRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceOutRight { @include bounceOutRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceOutRight { @include bounceOutRight(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceOutRight { @include bounceOutRight(o); }
+}
+@keyframes bounceOutRight { @include bounceOutRight(none); }
+
+.bounceOutRight {
+ @include animation-name(bounceOutRight);
+}
View
34 stylesheets/animations/bouncing-exits/_bounceOutUp.scss
@@ -0,0 +1,34 @@
+@mixin bounceOutUp($prefix) {
+ 0% {
+ @include transform(translateY(0), $prefix);
+ }
+ 20% {
+ opacity: 1;
+ @include transform(translateY(20px), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateY(-2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes bounceOutUp { @include bounceOutUp(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes bounceOutUp { @include bounceOutUp(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes bounceOutUp { @include bounceOutUp(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes bounceOutUp { @include bounceOutUp(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes bounceOutUp { @include bounceOutUp(o); }
+}
+@keyframes bounceOutUp { @include bounceOutUp(none); }
+
+.bounceOutUp {
+ @include animation-name(bounceOutUp);
+}
View
25 stylesheets/animations/fading-entrances/_fadeIn.scss
@@ -0,0 +1,25 @@
+@mixin fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeIn { @include fadeIn; }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeIn { @include fadeIn; }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeIn { @include fadeIn; }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeIn { @include fadeIn; }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeIn { @include fadeIn; }
+}
+@keyframes fadeIn { @include fadeIn; }
+
+.fadeIn {
+ @include animation-name(fadeIn);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInDown.scss
@@ -0,0 +1,31 @@
+@mixin fadeInDown($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateY(-20px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInDown { @include fadeInDown(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInDown { @include fadeInDown(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInDown { @include fadeInDown(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInDown { @include fadeInDown(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInDown { @include fadeInDown(o); }
+}
+@keyframes fadeInDown { @include fadeInDown(none); }
+
+.fadeInDown {
+ @include animation-name(fadeInDown);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInDownBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeInDownBig($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateY(-2000px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInDownBig { @include fadeInDownBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInDownBig { @include fadeInDownBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInDownBig { @include fadeInDownBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInDownBig { @include fadeInDownBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInDownBig { @include fadeInDownBig(o); }
+}
+@keyframes fadeInDownBig { @include fadeInDownBig(none); }
+
+.fadeInDownBig {
+ @include animation-name(fadeInDownBig);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInLeft.scss
@@ -0,0 +1,31 @@
+@mixin fadeInLeft($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateX(-20px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInLeft { @include fadeInLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInLeft { @include fadeInLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInLeft { @include fadeInLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInLeft { @include fadeInLeft(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInLeft { @include fadeInLeft(o); }
+}
+@keyframes fadeInLeft { @include fadeInLeft(none); }
+
+.fadeInLeft {
+ @include animation-name(fadeInLeft);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInLeftBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeInLeftBig($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateX(-2000px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInLeftBig { @include fadeInLeftBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInLeftBig { @include fadeInLeftBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInLeftBig { @include fadeInLeftBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInLeftBig { @include fadeInLeftBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInLeftBig { @include fadeInLeftBig(o); }
+}
+@keyframes fadeInLeftBig { @include fadeInLeftBig(none); }
+
+.fadeInLeftBig {
+ @include animation-name(fadeInLeftBig);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInRight.scss
@@ -0,0 +1,31 @@
+@mixin fadeInRight($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateX(20px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInRight { @include fadeInRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInRight { @include fadeInRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInRight { @include fadeInRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInRight { @include fadeInRight(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInRight { @include fadeInRight(o); }
+}
+@keyframes fadeInRight { @include fadeInRight(none); }
+
+.fadeInRight {
+ @include animation-name(fadeInRight);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInRightBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeInRightBig($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateX(2000px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInRightBig { @include fadeInRightBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInRightBig { @include fadeInRightBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInRightBig { @include fadeInRightBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInRightBig { @include fadeInRightBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInRightBig { @include fadeInRightBig(o); }
+}
+@keyframes fadeInRightBig { @include fadeInRightBig(none); }
+
+.fadeInRightBig {
+ @include animation-name(fadeInRightBig);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInUp.scss
@@ -0,0 +1,31 @@
+@mixin fadeInUp($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateY(20px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInUp { @include fadeInUp(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInUp { @include fadeInUp(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInUp { @include fadeInUp(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInUp { @include fadeInUp(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInUp { @include fadeInUp(o); }
+}
+@keyframes fadeInUp { @include fadeInUp(none); }
+
+.fadeInUp {
+ @include animation-name(fadeInUp);
+}
View
31 stylesheets/animations/fading-entrances/_fadeInUpBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeInUpBig($prefix) {
+ 0% {
+ opacity: 0;
+ @include transform(translateY(2000px), $prefix);
+ }
+ 100% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeInUpBig { @include fadeInUpBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeInUpBig { @include fadeInUpBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeInUpBig { @include fadeInUpBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeInUpBig { @include fadeInUpBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeInUpBig { @include fadeInUpBig(o); }
+}
+@keyframes fadeInUpBig { @include fadeInUpBig(none); }
+
+.fadeInUpBig {
+ @include animation-name(fadeInUpBig);
+}
View
25 stylesheets/animations/fading-exits/_fadeOut.scss
@@ -0,0 +1,25 @@
+@mixin fadeOut {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOut { @include fadeOut; }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOut { @include fadeOut; }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOut { @include fadeOut; }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOut { @include fadeOut; }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOut { @include fadeOut; }
+}
+@keyframes fadeOut { @include fadeOut; }
+
+.fadeOut {
+ @include animation-name(fadeOut);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutDown.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutDown($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateY(20px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutDown { @include fadeOutDown(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutDown { @include fadeOutDown(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutDown { @include fadeOutDown(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutDown { @include fadeOutDown(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutDown { @include fadeOutDown(o); }
+}
+@keyframes fadeOutDown { @include fadeOutDown(none); }
+
+.fadeOutDown {
+ @include animation-name(fadeOutDown);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutDownBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutDownBig($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateY(2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutDownBig { @include fadeOutDownBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutDownBig { @include fadeOutDownBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutDownBig { @include fadeOutDownBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutDownBig { @include fadeOutDownBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutDownBig { @include fadeOutDownBig(o); }
+}
+@keyframes fadeOutDownBig { @include fadeOutDownBig(none); }
+
+.fadeOutDownBig {
+ @include animation-name(fadeOutDownBig);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutLeft.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutLeft($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateX(-20px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutLeft { @include fadeOutLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutLeft { @include fadeOutLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutLeft { @include fadeOutLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutLeft { @include fadeOutLeft(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutLeft { @include fadeOutLeft(o); }
+}
+@keyframes fadeOutLeft { @include fadeOutLeft(none); }
+
+.fadeOutLeft {
+ @include animation-name(fadeOutLeft);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutLeftBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutLeftBig($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateX(-2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutLeftBig { @include fadeOutLeftBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutLeftBig { @include fadeOutLeftBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutLeftBig { @include fadeOutLeftBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutLeftBig { @include fadeOutLeftBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutLeftBig { @include fadeOutLeftBig(o); }
+}
+@keyframes fadeOutLeftBig { @include fadeOutLeftBig(none); }
+
+.fadeOutLeftBig {
+ @include animation-name(fadeOutLeftBig);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutRight.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutRight($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateX(20px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutRight { @include fadeOutRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutRight { @include fadeOutRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutRight { @include fadeOutRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutRight { @include fadeOutRight(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutRight { @include fadeOutRight(o); }
+}
+@keyframes fadeOutRight { @include fadeOutRight(none); }
+
+.fadeOutRight {
+ @include animation-name(fadeOutRight);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutRightBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutRightBig($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateX(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateX(2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutRightBig { @include fadeOutRightBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutRightBig { @include fadeOutRightBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutRightBig { @include fadeOutRightBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutRightBig { @include fadeOutRightBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutRightBig { @include fadeOutRightBig(o); }
+}
+@keyframes fadeOutRightBig { @include fadeOutRightBig(none); }
+
+.fadeOutRightBig {
+ @include animation-name(fadeOutRightBig);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutUp.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutUp($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateY(-20px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutUp { @include fadeOutUp(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutUp { @include fadeOutUp(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutUp { @include fadeOutUp(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutUp { @include fadeOutUp(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutUp { @include fadeOutUp(o); }
+}
+@keyframes fadeOutUp { @include fadeOutUp(none); }
+
+.fadeOutUp {
+ @include animation-name(fadeOutUp);
+}
View
31 stylesheets/animations/fading-exits/_fadeOutUpBig.scss
@@ -0,0 +1,31 @@
+@mixin fadeOutUpBig($prefix) {
+ 0% {
+ opacity: 1;
+ @include transform(translateY(0), $prefix);
+ }
+ 100% {
+ opacity: 0;
+ @include transform(translateY(-2000px), $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes fadeOutUpBig { @include fadeOutUpBig(webkit); }
+}
+@if $experimental-support-for-khtml {
+ @-khtml-keyframes fadeOutUpBig { @include fadeOutUpBig(khtml); }
+}
+@if $experimental-support-for-mozilla {
+ @-moz-keyframes fadeOutUpBig { @include fadeOutUpBig(moz); }
+}
+@if $experimental-support-for-microsoft {
+ @-ms-keyframes fadeOutUpBig { @include fadeOutUpBig(ms); }
+}
+@if $experimental-support-for-opera {
+ @-o-keyframes fadeOutUpBig { @include fadeOutUpBig(o); }
+}
+@keyframes fadeOutUpBig { @include fadeOutUpBig(none); }
+
+.fadeOutUpBig {
+ @include animation-name(fadeOutUpBig);
+}
View
44 stylesheets/animations/flippers/_flip.scss
@@ -0,0 +1,44 @@
+@mixin flip($prefix) {
+ 0% {
+ @include transform(perspective(400px) rotateY(0), $prefix);
+ @include animation-timing-function(ease-out, $prefix: $prefix);
+ }
+ 40% {
+ @include transform(perspective(400px) translateZ(150px) rotateY(170deg), $prefix);
+ @include animation-timing-function(ease-out, $prefix: $prefix);
+ }
+ 50% {
+ @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1), $prefix);
+ @include animation-timing-function(ease-in, $prefix: $prefix);
+ }
+ 80% {
+ @include transform(perspective(400px) rotateY(360deg) scale(.95), $prefix);
+ @include animation-timing-function(ease-in, $prefix: $prefix);
+ }
+ 100% {
+ @include transform(perspective(400px) scale(1), $prefix);
+ @include animation-timing-function(ease-in, $prefix: $prefix);
+ }
+}
+
+@if $experimental-support-for-webkit {
+ @-webkit-keyframes flip { @include flip(webkit); }
+}
+@if $experimental-support-for-khtml {
+