为什么我在使用 CSS3 转换时会出现延迟？

Question

首先，是我吗？

我已将动画制作得又好又长，因此可以区分它们，但在我的浏览器上 - Chromium 版本 45.0.2454.101 Ubuntu 14.04（64 位） - "closing" 动画是延迟了 transition-duration 属性.

的一部分

我已经尝试了各种缓动函数，但它们都表现出相同的行为，即一段时间没有任何反应，然后动画结束的速度比预期的要快。

下面重复了jsfiddle的代码，最初是无耻地从atzcss.com

偷来的

<div class="group">
    <input type="checkbox" 
        class="showhide" 
        id="showhide"
    />
    <label for="showhide">
        show/hide
    </label>


    <div class="subpane">
        <pre>
        lots
        of
        stuff
        so
        the
        pane
        is
        nice
        and
        tall
        for
        demonstration
        purposes
        </pre>
    </div>
</div>

.group {
    border: 1px solid #aaa;
}
.group label {
    font-size: 150%;
    font-weight: bold;
    width: initial;
    display: block;
    background-color: #F4EDFF;
    text-transform: capitalize;
}

.group input {
    display: none;
}

.group input ~ label:after {
    font-family: FontAwesome;
    /* fa-angle-double-down */
    content: "\f103";
}

.group input:checked ~ label:after {
    font-family: FontAwesome;
    /* fa-angle-double-up */
    content: "\f102";
}


.group input ~ .subpane {
    max-height: 0;
    overflow: hidden;
    transition: max-height 5s ease-out;
    transition-delay: 0;
}

.group input:checked ~ .subpane {
    max-height: 10000px;
    transition: max-height 3s ease-in;
    transition-delay: 0;
}

Answer 1

这是一个有趣的案例。但是剥离它你会发现 max-height 是罪魁祸首。

选中复选框后，窗格中有 max-height: 10000px。当您现在取消选中该复选框时，max-height 会逐渐动画化为 0。这意味着，9999px，然后 9998px，...

直到您看到缩小后的视觉效果 max-height 它会持续一段时间。

为什么我在使用 CSS3 转换时会出现延迟？

Why do I get a delay when using CSS3 transitions?

css

animation

css-transitions