compass-animation saves all the time and efforts

Just wanted to introduce the compass animate plugin. It great and saved our lots of efforts.

A normal css animation looks like this:

@keyframes my-animation {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
.box {
  animation: my-animation 10s infinite alternate;
}

But that’s not the reality, you need to include all the vendors 😡 , your code gets from 1x to 4-5x of lines immediately. Multiple times copy pasting the same code and changing the vendor can be really confusing, it definitely breaks your concentration and you end up in a css animation which does not work in one of the browsers, and which you can not debug. Compass Animate will help you here. With @include keyframes() you can do all the magic and forget about any errors, confusions or debugging. Just writing this much:

@include keyframes(my-animation) {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
.box {
  @include animation(my-animation 10s infinite alternate);
}

Will generate you this much:

@-webkit-keyframes my-animation {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
@-moz-keyframes my-animation {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
@-o-keyframes my-animation {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
@keyframes my-animation {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
.box {
  -webkit-animation: my-animation 10s infinite alternate;
     -moz-animation: my-animation 10s infinite alternate;
       -o-animation: my-animation 10s infinite alternate;
          animation: my-animation 10s infinite alternate;
}

And that was only one great feature, compass-animate is loaded with loads for awesome features and built in animations and effects.
Have a look 🙂