0

我有大量相对简单的代码，在 JSFiddle here中找到的一个简短动画，但我对我编写的代码感到失望。我觉得它可能会，或者至少应该会更短，因为我不得不重复自己做一些如此细微的不同的事情：

HTML：

<div class="movement">
    <div class="mover x1 back"></div>
    <div class="mover x2 front"></div>
    <div class="mover x3 back"></div>
    <div class="mover x4 front"></div>
    <div class="mover x5 back"></div>
    <div class="mover x6 front"></div>
</div>

CSS：

.mover {
    position: absolute; 
    width: 200px; 
    height: 20px;
    background: black;

    -webkit-animation: animato 18s linear infinite;
    -moz-animation: animato 18s linear infinite;
    -o-animation: animato 18s linear infinite;
    animation: animato 18s linear infinite;
}

...

.x1 {
    right: 30%;
    top: 90px;

    -webkit-animation-delay: -3s;
    -moz-animation-delay: -3s;
    -o-animation-delay: -3s;
    animation-delay: -3s;
}
.x2 {
    right: 45%;
    top: 130px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6; 

    -webkit-animation-delay: -6s; 
    -moz-animation-delay: -6s;
    -o-animation-delay: -6s;
    animation-delay: -6s;
}

... for each and every moving object, up to x6

我真正想做的是只有一个容器 div（上面的 HTML 中的 class="movement"）没有子 div 标签，我可以在其中创建 6 个滚动的移动对象。此外，不必重复 -vendor-animation-delay 或 -vendor-transform 只是为了更改每个规则的延迟时间/比例，这将是非常棒的。有没有更好的我错过的代码重构，或者我真的必须在每个 div 上重复这个以使用 CSS 实现这种效果？

4

2 回答 2

3

除了使用像Sass或更少这样的预处理器，你可以做的不多，它可以让你缩短你的 css（sass 示例）：

@mixin prefixes($declaration,$value){
    -webkit-#{$declaration}:$value;
    -moz-#{$declaration}:$value;
    -o-#{$declaration}:$value;
    #{$declaration}:$value;
}
@mixin animation-delay($delay){
    @include prefixes("animation-delay",$delay);
}
@mixin position($right,$top){
    right:$right;
    top:$top;
}
.x1 {
    @include position(30%,90px);
    @include animation-delay(-3s);
}
.x2 {
    @include position(45%,130px);
    @include animation-delay(-6s);
    /* same is possible for the transform, etc. */
}

我会在小提琴中向您展示一个示例（实际上您可以在那里使用 sass：Languages -> switch CSS -> SCSS），但不幸的是，sass 选项似乎被破坏了。

less/sass 源代码肯定更容易维护，但最终它会编译成你原来的冗长 CSS。

于 2013-07-09T08:56:10.800 回答
0

看看Animate.css。

引用 Animate.css 网站：

animate.css 是一组很酷、有趣且跨浏览器的动画，供您在项目中使用。非常适合强调、主页、滑块和一般的加水效果。

于 2013-07-09T09:04:33.603 回答