## @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;
      }
    }