Nested @​keyframe rules

nested.scss

/* old Sass 3.3 */
/* nest keyframe rules inside their modules with `@at-root` */
.bunny {
  animation: hop 2s ease-in-out infinite, 
    move 6s ease-out forwards;

  @at-root {
    @keyframes hop { 
      50%  { transform: translateY(40px); }
    }
    @keyframes move { 
      100% { left: 400px; }
    }
  }
}

/* new Sass 3.4 */
/* nest keyframe rules like regular Sass rules */
.bunny {
  animation: hop 2s ease-in-out infinite, 
    move 6s ease-out forwards;
  
  @keyframes hop { 
    50%  { transform: translateY(40px); }
  }
  @keyframes move { 
    100% { left: 400px; }
  }
}

/* Sass outputs keyframe rules at the root level */
.bunny {
animation: hop 2s ease-in-out infinite,  
  move 6s ease-out forwards;
}
@keyframes hop {
  50% {
    transform: translateY(40px);
  }
}
@keyframes move {
  100% {
    left: 400px;
  }
}