对 CSS3 关键帧进行分组

发布于 2024-11-28 16:54:01 字数 384 浏览 0 评论 0 原文

我意识到我不能通过逗号 @keyframes mymove、@-moz-keyframes mymove 等分隔来简单地完成下面相同的代码。。为了让它们工作，我需要分别声明它们，如下所示。

有什么方法可以将它们分组并使代码更短吗？

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

原文

I have realized that I can't simple accomplish the same code below by separating by coma @keyframes mymove, @-moz-keyframes mymove, etc... In order for them to work I need to declare it each one separately as below.

Is there any way to group them and make this code shorter?

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

分享到QQ

分享到微博

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

发布评论

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

挖鼻大婶 2024-12-05 16:54:01

不，我不这么认为，但你可以使用 CSS 语言（又名 CSS 预处理器），如 SASS/SCSS/LESS/... - 输出 (CSS) 仍然是相同的，但更改某些内容会容易得多！

查看

如果您有兴趣 - 努力安装和设置它们是完全值得的！

编辑：使用 SCSS 我做了以下操作：

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

用法示例：

@include keyframes(pulse) {
    0%,100% {
        opacity: 0;
    } 
    50% {
        opacity: 1;
    }
}

虽然应该补充一点，您需要最新的预发布的 SASS 才能嵌套规则（我们在另一个“{”规则中有一个“{”。 .）所以你应该更新运行“gem install sass --pre”这应该让你“sass-3.2.0.alpha.104”

no, I don't think so, but you could use a CSS language (aka CSS preprocessor) like SASS/SCSS/LESS/... - the output (CSS) would still be the same, but changing something would be much easier!

Check out

if you're interested - the effort of installing them and setting them up is totally worth it!

EDIT: Using SCSS I did the following:

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

example of usage:

@include keyframes(pulse) {
    0%,100% {
        opacity: 0;
    } 
    50% {
        opacity: 1;
    }
}

Although it should be added that you need the latest pre-release of SASS to be able to nest rules (we have got a "{" inside another "{" rule...) so you should update run "gem install sass --pre" which should get you "sass-3.2.0.alpha.104"

回复收藏 0 原文

~没有更多了~