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

Posted 2023-03-06

【中文标题】CSS：使悬停动画平滑[重复]

【英文标题】：CSS: make hover animation smooth [duplicate]

【发布时间】：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>

【参考方案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>