CSS：使悬停动画平滑[重复]答案

【问题标题】：CSS: make hover animation smooth [duplicate]CSS：使悬停动画平滑[重复]
【发布时间】：2019-12-07 18:44:03
【问题描述】：

我有简单的悬停 CSS 动画。我的问题是，当我首先将鼠标悬停在框上时，动画不流畅，但动画输出流畅。

所以当我将鼠标悬停在它上面时，我需要使这个动画平滑。

.zoom {
    display: flex;
    justify-content: center;
}

.zoom .box{
    padding: 16px;
    transition: transform .6s;
}

.zoom .box:hover {
    transform: scale(1.2);
    background-color: #BD8A3B;
    transition: background-color .6s ease;
}

.box {
    width: 200px;
    height: 600px;
    background-color: #DACDBD;
}

<section class="zoom">
            <div class="box">
                <span class="bold">Pwinw wjdnw wndi</span>
                <span class="number">5,5 % - 6,6%</span>
                <span class="light">dwjndwj dwjndw dw</span>
                <span class="bold">wdjwndk wdniwd knj</span>
            </div>
        </section>

【问题讨论】：

标签： html css

【解决方案1】：

发生这种情况是因为您在 hover 状态上覆盖了转换，因此请尝试只定义一次转换，包括 background-color

.zoom {
    display: flex;
    justify-content: center;
}

.zoom .box{
    padding: 16px;
    transition: transform .6s, background-color .6s ease;
}

.zoom .box:hover {
    transform: scale(1.2);
    background-color: #BD8A3B;
}

.box {
    width: 200px;
    height: 600px;
    background-color: #DACDBD;
}

<section class="zoom">
            <div class="box">
                <span class="bold">Pwinw wjdnw wndi</span>
                <span class="number">5,5 % - 6,6%</span>
                <span class="light">dwjndwj dwjndw dw</span>
                <span class="bold">wdjwndk wdniwd knj</span>
            </div>
        </section>

【讨论】：

【解决方案2】：

为避免覆盖您的转换属性，您应该合并它们：

.zoom {
    display: flex;
    justify-content: center;
}

.zoom .box{
    padding: 16px;
    transition: background-color .6s ease, transform .6s;
}

.zoom .box:hover {
    transform: scale(1.2);
    background-color: #BD8A3B;
}

.box {
    width: 200px;
    height: 600px;
    background-color: #DACDBD;
}

<section class="zoom">
            <div class="box">
                <span class="bold">Pwinw wjdnw wndi</span>
                <span class="number">5,5 % - 6,6%</span>
                <span class="light">dwjndwj dwjndw dw</span>
                <span class="bold">wdjwndk wdniwd knj</span>
            </div>
        </section>

【讨论】：