1

我正在尝试创建一个动画，其中涉及以不同的速度移动几朵云来为天空设置动画。为了创建可重用的代码，我已经转向 mixins，但我似乎遇到了问题。

云有不同的起始位置（例如由右定义：100px - 在 $startpos 处传递）。在初始页面加载时，云位于正确的位置，但动画从随机的正确位置开始。

我的 scss 代码看起来像这样

@keyframes fadein {
    from { opacity: 0 }
    to   { opacity: 1 }
}

@mixin cloud($height, $width, $bg, $startpos, $slowanim, $fastanim) {
    background: url($bg) no-repeat;
    background-size: contain;
    border: none;

    height: $height; // 800
    width: $width; // 800

    position: absolute;
    right: $startpos;

    opacity: 1;
    animation: movecloudA $fastanim infinite;

    &.animate {
        animation: fadein 5s, movecloud $slowanim infinite;
        opacity: 1;
    }

    @include keyframes(movecloud) {
        0% { right: $startpos; }
        100% { right: 100%; animation: movecloud $slowanim infinite;}
    }

}

.cloudA {
    @include cloud(800px, 800px, 'assets/cloudA.svg', -100px, 5s, 1s)
    bottom: -400px;
}

.cloudB {
    @include cloud(1200px, 1200px, 'assets/cloudB.svg', -1500px, 9s, 5s)
    bottom: -800px;
    transform: rotate(360deg);
}

将鼠标悬停在感叹号上后，可以在https://meshto.space/上重现该行为

4

1 回答 1

1

所以我设法通过更多的实验来解决这个问题。

关键帧动画似乎没有包含在范围内，需要有一个唯一的名称。上面的行为实际上不是随机的，一旦动画开始，两个云的右偏移都更改为 -1500。

即你所有的动画都需要有唯一的名字。

上面的代码改为

@keyframes fadein {
    from { opacity: 0 }
    to   { opacity: 1 }
}

@mixin cloud($bg, $anim, $height, $width, $startpos, $slowanim, $fastanim) {
    background: url($bg) no-repeat;
    background-size: contain;
    border: none;

    height: $height; // 800
    width: $width; // 800

    position: absolute;
    right: $startpos;

    opacity: 1;
    // animation: movecloudA $fastanim infinite;

    &.animate {
        animation: fadein 5s, $anim $slowanim infinite;
        opacity: 1;
    }

    @include keyframes($anim) {
        0% { right: $startpos; }
        100% { right: 100% }
    }

}

.cloudA {
    @include cloud('assets/cloudA.svg', cloudAnimA, 800px, 800px, -100px, 5s, 1s)
    bottom: -400px;
}

.cloudB {
    @include cloud('assets/cloudB.svg', cloudAnimB, 1200px, 1200px, -1500px, 9s, 5s)
    bottom: -800px;
    transform: rotate(360deg);
}

如果这个问题有更简洁的解决方案，将不胜感激:)。泰

于 2018-04-24T16:27:06.663 回答