//sass
@include keyframes(role) {
  from {
    @include transform(translateX(0) rotate(0deg))
  }
  to {
    @include transform( translateX(600px) rotate(1080deg))
  }
}
section.demo {
  padding: $grid-gutter*3 $grid-gutter $grid-gutter $grid-gutter;
  min-width: 600px - ($grid-gutter*2);
  @include background(#ddd url("https://developer.cdn.mozilla.net/media/img/blueprint-dark.png"));
  &:hover {
    .box {
       &.ball {
         @include animation(role 5s ease-out);
       }
    }
  }
  .box {
    position: relative;
    display: block;
    height: $grid-gutter*2;
    width: $grid-gutter*2;
    background-color: orange;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    border: 1px solid red;
    &.gradient {
      @include linear-gradient(red,orange);
    }
    &.circle {
      border-radius: $grid-gutter*2;
    }
  }
}
/* css */
@-webkit-keyframes role {
  from {
    -webkit-transform: translateX(0) rotate(0deg);
    -moz-transform: translateX(0) rotate(0deg);
    -ms-transform: translateX(0) rotate(0deg);
    -o-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(600px) rotate(1080deg);
    -moz-transform: translateX(600px) rotate(1080deg);
    -ms-transform: translateX(600px) rotate(1080deg);
    -o-transform: translateX(600px) rotate(1080deg);
    transform: translateX(600px) rotate(1080deg);
  }
}
@-moz-keyframes role {
  from {
    -webkit-transform: translateX(0) rotate(0deg);
    -moz-transform: translateX(0) rotate(0deg);
    -ms-transform: translateX(0) rotate(0deg);
  -o-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(600px) rotate(1080deg);
    -moz-transform: translateX(600px) rotate(1080deg);
    -ms-transform: translateX(600px) rotate(1080deg);
    -o-transform: translateX(600px) rotate(1080deg);
    transform: translateX(600px) rotate(1080deg);
  }
}

@keyframes role {
  from {
    -webkit-transform: translateX(0) rotate(0deg);
    -moz-transform: translateX(0) rotate(0deg);
    -ms-transform: translateX(0) rotate(0deg);
    -o-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(600px) rotate(1080deg);
    -moz-transform: translateX(600px) rotate(1080deg);
    -ms-transform: translateX(600px) rotate(1080deg);
    -o-transform: translateX(600px) rotate(1080deg);
  transform: translateX(600px) rotate(1080deg);
  }
}
section.demo {
  padding: 90px 30px 30px 30px;
  min-width: 540px;
  background: #dddddd url("https://developer.cdn.mozilla.net/media/img/blueprint-dark.png");
}
section.demo:hover .box.ball {
  -webkit-animation: role 5s ease-out;
  -moz-animation: role 5s ease-out;
  animation: role 5s ease-out;
}
section.demo .box {
  position: relative;
  display: block;
  height: 60px;
  width: 60px;
  background-color: orange;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  border: 1px solid red;
}
section.demo .box.gradient {
  background-color: red;
  background-image: -webkit-linear-gradient(red, orange);
  background-image: linear-gradient(red, orange);
}
section.demo .box.circle {
  border-radius: 60px;
}