voku1987

sprites-test

Sep 8th, 2014
263
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // compass
  2. @import "compass/css3";
  3. @import "compass/utilities/sprites";
  4.  
  5. /*
  6.  *  - - - - - - - - - -
  7.  * some icons for testing
  8.  *  - - - - - - - - - -
  9.  */
  10. @import "../images/spritesTest/*.png";
  11.  
  12. @include all-spritesTest-sprites;
  13. #spritesOverview span {
  14.   width: 32px;
  15.   height: 32px;
  16.   display: block;
  17.   transition: all 0.2s ease-in;
  18.   &:hover {
  19.     @include transform(scale(1.8));
  20.     transition: all 0.4s ease-out;
  21.   }
  22. }
  23.  
  24. @for $i from 1 through 20 {
  25.   .step#{$i} {
  26.     animation: movement 1500ms ease (75ms * $i) infinite alternate;
  27.   }
  28. }
  29.  
  30. @keyframes movement {
  31.   from {
  32.     @include transform(scale(1.0) translateY(0px) rotateX(0deg));
  33.     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  34.   }
  35.   to {
  36.     @include transform(scale(1.5) translateY(-25px) rotateX(45deg));
  37.     box-shadow: 0 25px 25px rgba(0, 0, 0, 0.2);
  38.   }
  39. }
RAW Paste Data