CSS keyframe animation practice

star.haml

.oblong_container
  %div{:class => "oblong green"}
  %div{:class => "oblong blue"}
  %div{:class => "oblong purple"}
  %div{:class => "oblong pink"}

star_animate.sass

$oblong_height: 400px
$pink: #f6356c
$blue: #3373b0
$purple: #582b8a
$green: #1f6e4e

body
  background: #0e2332

#oblong
  height: $oblong_height
  width: 70px
  border-radius: 8px

.oblong_container
  @extend #oblong
  position: relative
  -webkit-animation: moveToCenter 5s ease-out 0
  left: 40%
  top: 150px
  background: transparent
  .oblong
    @extend #oblong
    position: absolute
    top: 0
    left: 0
    &.pink
      background-color: transparentize($pink, 0.3)
      -webkit-animation: rotatePink 2s ease-out 0
      +rotate(90deg)
      color: darken($pink, 9%)
    &.blue
      background-color: transparentize($blue, 0.3)
      -webkit-animation: rotateBlue 3s ease-out 0
      +rotate(135deg)
    &.purple
      background-color: transparentize(purple, 0.3)
    &.green
      background-color: transparentize($green, 0.3)
      -webkit-animation: rotateGreen 3s ease-out 0
      +rotate(226deg)

@-webkit-keyframes moveToCenter  
  0% 
    top: -($oblong_height)
  10% 
    top: 150px
  100% 
    top: 150px

@-webkit-keyframes moveToCenter  
  0% 
    top: -($oblong_height)
  10% 
    top: 150px
  100% 
    top: 150px

=rotate($deg)
  -webkit-transform: rotate($deg)
  transform: rotate($deg)
  
=general_rotation($deg)
  0% 
    -webkit-transform: rotate(0deg)
  80% 
    -webkit-transform: rotate(0deg)
  100% 
    -webkit-transform: rotate($deg)


@-webkit-keyframes rotatePink
  +general_rotation(90deg)

@-webkit-keyframes rotateBlue
  +general_rotation(135deg)

@-webkit-keyframes rotateGreen
  +general_rotation(226deg)