Question

我有一大堆相对简单的代码，一个在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实现这个效果吗？

Answer 1

除了使用Sass或less之类的预处理器，你可以做很多事情，这可以缩短你的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：语言 - ＆gt;切换CSS - ＆gt; SCSS）但不幸的是sass选项似乎被打破了。

less / sass源肯定更容易维护，但最终它会编译为原始的详细CSS。

Answer 2

查看Animate.css。

从Animate.css网站引用：

animate.css是一系列酷炫，有趣，跨浏览器的动画供您在项目中使用。非常适合强调，主页，滑块和一般只是添加水 - 非常棒。

CSS重构动画div

2 个答案: