nick-jonas / waves-css-anim.scss

Created March 27, 2014


    
    View waves-css-anim.scss 
  
  
      waves-css-anim.scss
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            49
            50
          
          
            @import "compass/css3/animation";
@import "compass/css3/transform";
 
$waveWidth:998px;
 
@include keyframes(waves){
  0%{
    left:0;
  }
  100%{
    left:$waveWidth * -1;
  }
}
 
 
body{
  background:#e6e6e5;
  overflow:hidden;
}
 
 
.waves{
  position: fixed;
  bottom: 0;
  left: 0;
  width: $waveWidth * 5;
  z-index:0;
  opacity:0.75;
  .wave{
    position:absolute;
    width:100%;
    height:300px;
    background-image:url('../img/wave.png');
    background-repeat:repeat-x;
    &.bottom-wave{
      @include animation(waves 17s infinite linear);
      bottom:-90px;
    }
    &.middle-wave{
      @include animation(waves 22s infinite linear);
      bottom:100px;
      margin-left:$waveWidth * -0.3;
    }
    &.top-wave{
      @include animation(waves 27s infinite linear);
      bottom:300px;
      margin-left:$waveWidth * -0.6;
    }
  }
}