动画错误，动画优先级，当动画应用于 child 和 parent 时

Question

我刚刚制作了一个小动画，它完全符合我的要求，除了一个小问题，我在 2 HTML 个元素上有 bounceIn 动画，我的 HTML 如下：

<div class="test animated bounceInDown"> 
    <span class="animated bounceInDown delay">I am animation</span> 
</div>

我的CSS：

.test {
    height: 200px;
    width: 200px;
    background-color:yellow;
    display: table;
}
.test span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.animated {
    -webkit-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}
.delay {
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    100% {
        transform: none;
    }
}
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

现在span当然是一个child的div，在span上我有一个animation-delay，问题是，span上的动画有一个小bug：它跟随 div 的动画，然后执行它自己的动画，即在页面加载时，即使我有动画延迟，span 元素仍然会随着 div 反弹。

与如何解决我的问题相比，我对为什么更感兴趣。这里有一个fiddle看看我在说什么：Fiddle

Answer 1

你的动画没有问题。就是你的动画配置不好

问题出现在动画触发之前。 text 将在动画 parent.

中呈现

当您的 text 被动画触发时，它会自行动画。这意味着它将向上移动 3000px。

=> 应该关注动画 child 中的动画 parent。

当您将动画应用于元素时，所有 child 元素也会进行动画处理。因此，在您的情况下，span 标记也使用 parent 进行动画处理。

页面加载后 animation-delay 的值经过一段时间后，child span 上的动画发生。

这不是错误。这是动画在 child 元素上工作的方式。

解决问题：只需在动画中使用 opacity 和 animation-fill-mode 即可解决问题

http://jsfiddle.net/ev5ur00n/2/

.test {
    height: 200px;
    width: 200px;
    background-color:yellow;
    display: table;
}
.test span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    opacity: 0;
}
.animated {
    -webkit-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}
.delay {
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

.bounceInDown2 {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

<div class="test animated bounceInDown"> 
    <span class="animated bounceInDown2 delay">I am animation</span> 
</div>

动画错误，动画优先级，当动画应用于 child 和 parent 时

Animation bug, precedence of animation, when animation applied to child and parent

css

css-animations