2

当我在写许多几乎相同的 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

4

3 回答 3

1

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

根据您的项目，您可以将CSS 解析为 PHP并在那里定义变量。我发现这个想法真的很性感，但还没有足够的需要使用它。

于 2011-08-03T03:40:48.593 回答
1

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

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

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

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

对我来说，之前的mixin是不够的。我还想要动态名称和供应商前缀如何？，这样我就不必编写规则 10 x 5 = 50 次（10 个名称，5 个供应商）。这是一个展示 CSS 预处理器强大功能的机会：

于 2012-06-14T08:47:16.230 回答
1

现在不行。请记住，如果您对 CSS 进行 gzip 压缩，那么很多这种低效率将会消失。

于 2011-08-01T12:13:37.143 回答