css - 缩短 css3 动画关键帧定义

Question

当我编写许多准相同的 CSS3 动画时，我想知道是否有一种方法可以缩短代码。
每次，只有最终关键帧不同。

@-webkit-keyframes one {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 50px;
    }
}

该代码非常长，所以我认为它可以轻松缩短，但看起来您必须一遍又一遍地定义整个动画。我尝试过类似的方法，但这在 Chrome 和 Safari 中不起作用。

@-webkit-keyframes one, two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    to {
        margin-left: 50px;
    }
}

有没有办法定义2个相同的动画？ :o

Answer 1

为了避免在开发过程中复制粘贴，您可以使用 CSS 预处理器，例如 SCSS / SASS和 LESS . mixin feature大大减少了代码大小:

对于单个属性，编写单个 mixin 就足够了:

.Duplicates(@marginLeft) {
    from { /* ... */ }
    80%  { /* ... */ }
    to { margin-left: @marginLeft;}
}
@-webkit-keyframes one {
    .Duplicates(20px);
}
@-webkit-keyframes two {
    .Duplicates(50px);
}

演示:一个繁忙的动画超市，使用纯 CSS(3)

对我来说，之前的mixin不够。我也想要动态名称和供应商前缀 ^how? ，这样我就不必将规则写 10 x 5 = 50 次(10 个名称，5 个供应商)。这是展示 CSS 预处理器强大功能的机会:

• 输入(较少)- http://pastebin.com/BcRYzdBj - 3kB
• 输出 (css) - http://pastebin.com/zLCS2z7L - 14kB(Gzipped 999 字节)
• 演示 ( source ): http://jsfiddle.net/ecPWA/show/