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个相同的动画？：○

Answer 1

目前不是。请记住，如果你正在graipping你的CSS，很多这种低效率将消失。

Answer 2

不是天生的。特别是对于供应商前缀，CSS会变得非常令人眼花缭乱，但是如果你正确部署文件（GZip，缓存等），那实际上并不是效率低下，只是写入的屁股很痛苦。

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

Answer 3

要避免在开发过程中进行复制粘贴，可以使用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/

缩短css3动画关键帧定义

3 个答案:

演示：动画繁忙的超市，使用纯CSS（3）