Question

我刚刚构建了一个小动画，它完全符合我的要求，除了一个小问题，我已经在2个HTML元素上进行了动画，我的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;
}

当然，跨度是div的一个孩子，在跨度上我有动画延迟，问题是，跨度上的动画有一个小bug：它跟随div的动画然后执行自己的动画，IE在页面加载时，即使我有动画延迟，span元素仍会与div反弹。

我对为什么更感兴趣，这比 HOW 更能解决我的问题。这是一个小提琴，看看我在说什么：Fiddle

Answer 1

你的动画没有错。只是动画的配置不好。

出现问题是因为在动画触发之前。 text将在动画父级中呈现。

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

=＆GT;应关注动画child内的动画parent。

将动画应用于元素时，所有子元素也会经历动画。因此，在您的情况下，span标记也与父级动画相同。

在页面加载后经过animation-delay的值后，儿童span上的动画就会发生。

这不是错误。它是动画对子元素的工作方式。

解决问题：只需将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时，动画bug，动画的优先级

1 个答案: