缩短 css3 动画关键帧定义

发布于 2024-11-27 15:43:55 字数 907 浏览 4 评论 0原文

当我编写许多准相同的 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

原文

While I was writing many quasi-identical CSS3 animations, I wondered if there's a way to shorten the code.
Each time, only the final keyframe is different.

@-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;
    }
}

That code is pretty long so I thought it could be easily shortened but looks like you have to define the whole animation over and over.
I tried something like this, but that doesn't work in Chrome and Safari.

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

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

Is there no way to define 2 identical animations? :o

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幸福不弃 2024-12-04 15:43:55

为了避免在开发过程中复制粘贴，您可以使用 CSS 预处理器，例如 SCSS / SASS 和更少。 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 预处理器强大功能的机会：

输入（较少）- http://pastebin.com/BcRYzdBj - 3kB
输出 (css) - http://pastebin.com/zLCS2z7L - 14kB（压缩后 999 字节）
演示（源< /a>): http://jsfiddle.net/ecPWA/show/

To avoid copy-pasting during development, you can use a CSS preprocessor, such as SCSS / SASS and LESS. The mixin feature greatly reduces the code size:

For a single property, writing a single mixin is sufficient:

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

Demo: An animated busy supermarket, using pure CSS(3)

For me, the previous mixin was not sufficient. I also wanted dynamic names and vendor-prefixes ^how?, so that I do not have to write a rule 10 x 5 = 50 times (10 names, 5 vendors). That's a chance to show the power of a CSS preprocessor: