Question

我在悬停时使用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>

Answer 1

为避免覆盖过渡属性，应合并它们：

.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>

Answer 2

之所以会发生这种情况，是因为您覆盖了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>

CSS：使悬停动画流畅

2 个答案: