CSS: make hover animation smooth

Question

I have simple animation with CSS on hover. My issue is when I hover on box first in animation is not smooth but animation out is smooth.

So I need make this animation smooth when I hover on it.

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

score 8 · Accepted Answer · answered Jul 30 '19 at 11:28

To avoid overriding your transition property, you should merge them :

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

score 0 · Answer 2 · answered Jul 30 '19 at 11:29

This happens because you override the transition on hover state, so try to define the transition just once, including also the 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: make hover animation smooth

2 Answers2