<div class="container">
<h2>Background Transitions</h2>
			<a href="#" class="fade">Fade</a>
			<a href="#" class="back-pulse">Back Pulse</a>
			<a href="#" class="sweep-to-right">Sweep To Right</a>
			<a href="#" class="sweep-to-left">Sweep To Left</a>
			<a href="#" class="sweep-to-bottom">Sweep To Bottom</a>
			<a href="#" class="sweep-to-top">Sweep To Top</a>
			<a href="#" class="bounce-to-right">Bounce To Right</a>
			<a href="#" class="bounce-to-left">Bounce To Left</a>
			<a href="#" class="bounce-to-bottom">Bounce To Bottom</a>
			<a href="#" class="bounce-to-top">Bounce To Top</a>
			<a href="#" class="radial-out">Radial Out</a>
			<a href="#" class="radial-in">Radial In</a>
			<a href="#" class="rectangle-in">Rectangle In</a>
			<a href="#" class="rectangle-out">Rectangle Out</a>
			<a href="#" class="shutter-in-horizontal">Shutter In Horizontal</a>
			<a href="#" class="shutter-out-horizontal">Shutter Out Horizontal</a>
			<a href="#" class="shutter-in-vertical">Shutter In Vertical</a>
			<a href="#" class="shutter-out-vertical">Shutter Out Vertical</a>
</div>

@import compass

body
  font-size: 16px
  font-family: Arial, sans-serif
*
  margin: 0
  padding: 0
.container
  margin: 0 auto
  width: 100%
  h2
    text-align: center
    margin: 30px 0
  a
    background-color: #ecf0f1
    box-shadow: 0 2px 1px rgba(0,0,0,.2)
    color: #2980b9
    display: block
    font-weight: bold
    margin-bottom: 20px
    padding: 15px 0
    text-align: center
    text-decoration: none
    text-transform: uppercase
    &:hover
      color: #fff
      box-shadow: 0 2px 1px rgba(0,0,0,.5)
//fade effect
.fade
  transition: background-color 1000ms
  &:hover
    background-color: #2980b9
//pulse effect
.back-pulse
  transition: background-color 1000ms
  &:hover
    background-color: #2980b9
    // animation: <animation-name> <duration> <no of times> <effect-name> <delay>
    -webkit-animation: back-pulse 1000ms infinite linear 500ms
    animation: back-pulse 1000ms infinite linear 500ms
    -webkit-transform: translateZ(0)
    transform: translateZ(0)

@keyframes back-pulse
  0%, 50%, 100%
    background-color: rgba(72,91,110,.75)
  25%, 75%
    background-color: #485B6E
@-webkit-keyframes back-pulse
  0%, 50%, 100%
    background-color: rgba(84,153,199,.75)
  25%, 75%
    background-color: #2980b9
//sweep to right effect
.sweep-to-right
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition: color 1000ms
  transition: color 1000ms
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #2098d1
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
    -webkit-transform-origin: 0 50%
    transform-origin: 0 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(1)
    transform: scaleX(1)
//sweep to left effect
.sweep-to-left
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition: color 1000ms
  transition: color 1000ms
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #2098d1
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
    -webkit-transform-origin: 100% 50%
    transform-origin: 100% 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(1)
    transform: scaleX(1)
//sweep to bottom
.sweep-to-bottom
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition: color 1000ms
  transition: color 1000ms
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #2098d1
    -webkit-transform: scaleY(0)
    transform: scaleY(0)
    -webkit-transform-origin: 50% 0%
    transform-origin: 50% 0%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleY(1)
    transform: scaleY(1)
//sweep to top
.sweep-to-top
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-transition: color 1000ms
  transition: color 1000ms
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #2098d1
    -webkit-transform: scaleY(0)
    transform: scaleY(0)
    -webkit-transform-origin: 50% 100%
    transform-origin: 50% 100%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleY(1)
    transform: scaleY(1)
// bounce to right  
.bounce-to-right
  position: relative
  -webkit-transition: color 500ms
  transition: color 500ms
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  &:before
    content: ""
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 0
    z-index: -1
    background: #2098d1
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transform-origin: 0% 50%
    transform-origin: 0% 50%
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(1)
    transform: scaleX(1)
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
// bounce to left  
.bounce-to-left
  position: relative
  -webkit-transition: color 500ms
  transition: color 500ms
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  &:before
    content: ""
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 0
    z-index: -1
    background: #2098d1
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transform-origin: 100% 50%
    transform-origin: 100% 50%
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(1)
    transform: scaleX(1)
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
// bounce to bottom  
.bounce-to-bottom
  position: relative
  -webkit-transition: color 500ms
  transition: color 500ms
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  &:before
    content: ""
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 0
    z-index: -1
    background: #2098d1
    -webkit-transform: scaleY(0)
    transform: scaleY(0)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transform-origin: 50% 0%
    transform-origin: 50% 0%
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleY(1)
    transform: scaleY(1)
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
// bounce to top  
.bounce-to-top
  position: relative
  -webkit-transition: color 500ms
  transition: color 500ms
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  &:before
    content: ""
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 0
    z-index: -1
    background: #2098d1
    -webkit-transform: scaleY(0)
    transform: scaleY(0)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transform-origin: 50% 100%
    transform-origin: 50% 100%
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleY(1)
    transform: scaleY(1)
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
// radial-out effect
.radial-out
  overflow: hidden
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  position: relative
  -webkit-transition: color 300ms
  transition: color 300ms
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #2098d1
    border-radius: 100%
    -webkit-transform: scale(0)
    transform: scale(0)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scale(2)
    transform: scale(2)
// radial-in effect
.radial-in
  overflow: hidden
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  background-color: #2098d1 !important
  position: relative
  -webkit-transition: color 300ms
  transition: color 300ms
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #ecf0f1
    border-radius: 100%
    -webkit-transform: scale(2)
    transform: scale(2)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scale(0)
    transform: scale(0)
// rectangle in effect
.rectangle-in
  background-color: #2098d1 !important
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  -webkit-transition: color 300ms
  transition: color 300ms
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #ecf0f1
    -webkit-transform: scale(1)
    transform: scale(1)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition-timing-function: ease-out
    transition-timing-function: ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scale(0)
    transform: scale(0)

// rectangle out effect
.rectangle-out
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  -webkit-transition: color 300ms
  transition: color 300ms
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #2098d1
    -webkit-transform: scale(0)
    transform: scale(0)
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scale(1)
    transform: scale(1)
//shutter in horizontal effect
.shutter-in-horizontal
  background-color: #2098d1 !important
  -webkit-transition: color 300ms
  transition: color 300ms
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: #ecf0f1
    -webkit-transform: scaleX(1)
    transform: scaleX(1)
    -webkit-transform-origin: 50%
    transform-origin: 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
//shutter out horizontal effect
.shutter-out-horizontal
  -webkit-transition: color 300ms
  transition: color 300ms
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: #2098d1
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
    -webkit-transform-origin: 50%
    transform-origin: 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(1)
    transform: scaleX(1)
//shutter in vertical effect
.shutter-in-vertical
  background-color: #2098d1 !important
  -webkit-transition: color 300ms
  transition: color 300ms
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: #ecf0f1
    -webkit-transform: scaleY(1)
    transform: scaleY(1)
    -webkit-transform-origin: 50%
    transform-origin: 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleY(0)
    transform: scaleY(0)
//shutter out vertical effect
.shutter-out-vertical
  -webkit-transition: color 300ms
  transition: color 300ms
  position: relative
  -webkit-transform: translateZ(0)
  transform: translateZ(0)
  -webkit-backface-visibility: hidden
  backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: #2098d1
    -webkit-transform: scaleY(0)
    transform: scaleY(0)
    -webkit-transform-origin: 50%
    transform-origin: 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleY(1)
    transform: scaleY(1)