CSS3 动画 div by div 与延迟

Question

我

有 3 个div，我正在尝试一个接一个地制作动画。作为测试我 希望它们一个接一个地向下移动 50px。

我有以下 SCSS

    .action {
        margin: 20px 0;
        text-align: center;
        transform: translate(0,0);
        transition: all .5s;
        &.animate {
            transform: translate(0, 50px);
        }
        &.animate-delay-1 {animation-delay: 1s;}
        &.animate-delay-2 {animation-delay: 2s;}
    }

这是我的HTML

            <div class="actions">
                <div class="action animate animate-delay-0">
                    <i class="fa fa-envelope-o"></i>
                    <span class="person"></span> receives her questions by email
                </div>
                <div class="action animate animate-delay-1">
                    <span class="person"></span> fills in the answers to her questions
                </div>
                <div class="action animate animate-delay-2">
                    <span class="person"></span> receives the results by email
                </div>
           </div>

我觉得我做错了什么？它们都同时动画化。就像延迟被忽略了一样。有什么想法吗？谢谢！

Answer 1

您希望transition-delay过渡。我最近写了一个可能有用的 SASS mixin：

@mixin increment-transition ($el, $time, $num, $offset: 0) {
    $chain: '';
    @for $i from 1 through $num {
        $chain: $chain + ' + ' + $el;
        & #{$chain} {
            transition-delay: #{$i * $time + $offset}s;
        }
    }
}

你像这样使用它：

div.action {
    @include increment-transition(div.action, .05, 40);
}

编辑：它会产生类似的东西：

div.action {transition-delay: 0}
div.action + div.action {transition-delay: 0.5s}
div.action + div.action + div.action {transition-delay: 1s}
div.action + div.action + div.action + div.action {transition-delay: 1.5s}

Answer 2

你不使用你的类animate-delay-1

试试这个：

    <div class="actions">
            <div class="action">
                <i class="fa fa-envelope-o"></i>
                <span class="person"></span> receives her questions by email
            </div>
            <div class="action animate-delay-1">
                <span class="person"></span> fills in the answers to her questions
            </div>
            <div class="action animate-delay-2">
                <span class="person"></span> receives the results by email
            </div>
       </div>