Question

我有以下动画代码......

.a {
    background: url(../Images/experience-1.jpg) center center no-repeat red;
    z-index: 7;

    -webkit-animation-delay: 3s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 3s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 3s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 3s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.b {
    background: url(../Images/experience-2.jpg) center center no-repeat yellow;
    z-index: 6;

    -webkit-animation-delay: 18s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 18s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 18s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 18s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.c {
    background: url(../Images/experience-3.jpg) center center no-repeat pink;
    z-index: 5;

    -webkit-animation-delay: 33s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 33s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 33s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 33s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.d {
    background: url(../Images/experience-4.jpg) center center no-repeat green;
    z-index: 4;

    -webkit-animation-delay: 48s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 48s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 48s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 48s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.e {
    background: url(../Images/experience-5.jpg) center center no-repeat orange;
    z-index: 3;

    -webkit-animation-delay: 63s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 63s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 63s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 63s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.f {
    background: url(../Images/experience-6.jpg) center center no-repeat purple;
    z-index: 2;

    -webkit-animation-delay: 78s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 78s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 78s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 78s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

...而我想做的是将来更容易更改值。

只是解释每个类都应用于带有背景图片的div，并且每个div绝对位于彼此之上。因此淡出前div将显示其下方的div。

初始动画延迟为3秒，然后每个div的持续时间始终为5秒。

但是对于每个课程，我都会将动画推迟上一个动画完成所需的时间。

因此.b {}类设置为延迟18秒。解决这个问题的方法是：第一个动画有3秒延迟+ 5秒持续时间，总共等于8秒+ 10秒，以便用户正确看到下一张图像。

因此c。{}类设置为延迟33秒。同样算法是：第二个动画有18秒的延迟+ 5秒的持续时间，总共等于23秒+额外的10秒，以便用户正确看到下一张图像。

所以这是动画的前提，我需要弄清楚如何通过Sass自动化（如果客户说“你知道什么，我希望持续时间为10秒”）。

提前感谢您提供的任何帮助。

Answer 1

步骤1.将其包裹在mixin中，使用变量跟踪持续时间

对于初学者，你可以将整个块包装在一个mixin中并使用一些变量（全局，所以要小心）来跟踪总持续时间和动画索引：

$queue-max-z-index: 7;
$queue-total-delay: 0;
$queue-index: 0;

@mixin queue-animation($class, $color, $delay: 0, $duration: 5s, $viewing-time: 10s) {
    .#{$class} {
        background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
        z-index: $queue-max-z-index - $queue-index;

        -webkit-animation-delay: $queue-total-delay + $delay;
        -webkit-animation-duration: $duration;
        -webkit-animation-name: fadeout;
        -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        -moz-animation-delay: $queue-total-delay + $delay;
        -moz-animation-duration: $duration;
        -moz-animation-name: fadeout;
        -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        -o-animation-delay: $queue-total-delay + $delay;
        -o-animation-duration: $duration;
        -o-animation-name: fadeout;
        -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        animation-delay: $queue-total-delay + $delay;
        animation-duration: $duration;
        animation-name: fadeout;
        animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        $queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
        $queue-index: $queue-index + 1;
    }
}

现在您可以设置这样的动画：

@include queue-animation(a, red, 3s);
@include queue-animation(b, yellow);
@include queue-animation(c, pink);
@include queue-animation(d, green);
@include queue-animation(e, orange);
@include queue-animation(f, purple);

函数默认值表示可以覆盖单个动画的全局默认值。另请注意，它会自动跟踪设置的动画的计数（索引）和所述动画的总持续时间，因此您可以更改任何一个的持续时间或延迟，并且所有后续动画都将更新。

步骤2.清理这些前缀

要重构一点，你可以包含一个我用于供应商前缀属性的小帮手：

// Apply common prefixes to a property.
@mixin prefix($property, $value, $apply-to: property, $prefixes: -webkit -khtml -moz -ms -o) {

    @if $apply-to == property {
        @each $prefix in $prefixes {
            #{$prefix}-#{$property}: $value;
        }

    } @else if $apply-to == value {
        @each $prefix in $prefixes {
            #{$property}: $prefix + -$value;
        }

    } @else if $apply-to == both {
        @each $prefix in $prefixes {
            #{$prefix}-#{$property}: $prefix + -$value;
        }
    }

    #{$property}: $value;
}

现在你的功能看起来像这样：

@mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
    .#{$class} {
        background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
        z-index: $queue-max-z-index - $queue-index;

        @include prefix(animation-delay, $queue-total-delay + $delay);
        @include prefix(animation-duration, $duration);
        @include prefix(animation-name, fadeout);
        @include prefix(animation-fill-mode, forwards); /* this prevents the animation from restarting! */

        $queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
        $queue-index: $queue-index + 1;
    }
}

步骤3.使用`animation`简写

更进一步，您可以使用the animation shorthand：

@mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
    .#{$class} {
        background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
        z-index: $queue-max-z-index - $queue-index;

        @include prefix(animation, fadeout $duration ($queue-total-delay + $delay) forwards);

        $queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
        $queue-index: $queue-index + 1;
    }
}

谦逊的免责声明

我对Sass还是比较新的，所以我的建议是主观的，可能与最佳实践不符。这取决于你在多大程度上喜欢这个，所以你可以随意忽略或修改任何让你感到不舒服的建议。

Answer 2

不要打扰，有一个Compass plugin会为你做这件事。完全相同的代码被引入next release的Compass Core，所以很快您甚至不需要使用插件。您可以获得额外的优势，即其他人可以帮助您保持动画代码的最新状态。在您了解情况时，您可以提取Compass port的Dan Eden's Animate.css。

如何将这个CSS3动画转换为Sass mixin？

2 个答案:

步骤1.将其包裹在mixin中，使用变量跟踪持续时间

步骤2.清理这些前缀

步骤3.使用`animation`简写

谦逊的免责声明

如何将这个CSS3动画转换为Sass mixin？

2 个答案:

步骤1.将其包裹在mixin中，使用变量跟踪持续时间

步骤2.清理这些前缀

步骤3.使用animation简写

谦逊的免责声明

步骤3.使用`animation`简写