缩短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;
    }
}

有没有办法定义两个相同的动画？ :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（压缩后的 999 字节）
• 演示（source）：http://jsfiddle.net/ecPWA/show/

Answer 2

不是天生的。尤其是使用供应商前缀时，CSS 可能会令人眼花缭乱，但是如果您正确部署文件（GZip、缓存等），这并不是真正的低效率，只是写起来很痛苦。

根据您的项目，您可以parse CSS as PHP 并在那里定义变量。我觉得这个想法真的很性感，但没有足够需要使用它。

Answer 3

暂时没有。请记住，如果您对 CSS 进行 gzip 压缩，很多这种低效率的问题将会消失。