keyframes.md

@keyframes

Stylus supports the @keyframes at-rule, which is converted to @-webkit-keyframes when compiled:

 @keyframes pulse
   0%
     background-color red
     opacity 1.0
     -webkit-transform scale(1.0) rotate(0deg)
   33%
     background-color blue
     opacity 0.75
     -webkit-transform scale(1.1) rotate(-5deg)
   67%
     background-color green
     opacity 0.5
     -webkit-transform scale(1.1) rotate(5deg)
   100%
     background-color red
     opacity 1.0
     -webkit-transform scale(1.0) rotate(0deg)

yielding:

  @-webkit-keyframes pulse {
    0% {
      background-color: red;
      opacity: 1;
      -webkit-transform: scale(1) rotate(0deg);
    }

    33% {
      background-color: blue;
      opacity: 0.75;
      -webkit-transform: scale(1.1) rotate(-5deg);
    }

    67% {
      background-color: green;
      opacity: 0.5;
      -webkit-transform: scale(1.1) rotate(5deg);
    }

    100% {
      background-color: red;
      opacity: 1;
      -webkit-transform: scale(1) rotate(0deg);
    }

  }

Expansion

By using @keyframes, your rules are automatically expanded to the vendor prefixes defined by the vendors variable (default: webkit moz official). This means we can alter it at any time for the expansion to take effect immediately.

For example, consider the following:

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

This expands to our two default vendors, and the official syntax:

@-moz-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}

If we wanted to limit to the official syntax only, simply alter vendors:

vendors = official

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

Yielding:

@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}