Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Mikhail Korepanov Panya
114 lines (96 sloc) 2.032 kb
layout permalink
default
docs/keyframes.html

@keyframes

Stylus supports @keyframes both with curly braces or without them, you can also use interpolation both in names or steps of @keyframes:

$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)

Yielding (expanded prefixes ommited):

@keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

Expansion

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

Note that expansion of @keyframes to the prefixed at-rules would be removed from the Stylus 1.0 when we'd get to it

For example, consider the following:

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

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

@-moz-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-o-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@keyframes foo {
  from {
    color: #000;
  }
  to {
    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 {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
Jump to Line
Something went wrong with that request. Please try again.