中文
@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)
$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;
}
}
@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)
使用@keyframes
,通过vendors
变量,会自动添加私有前缀(moz webkit o ms official
)。这意味着你可以子啊任意时候立即高效地做修改。
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
}
}
@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;
}
}
@-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
}
}
vendors = official
@keyframes foo {
from {
color: black
}
to {
color: white
}
}
Yielding:
@keyframes foo {
from {
color: #000;
}
to {
color: #fff;
}
}
@keyframes foo {
from {
color: #000;
}
to {
color: #fff;
}
}