css - 过渡变换，缓和；有些元素在 'easing' 中，有些不在

Question

我在一个页面上有 2 个功能，当鼠标悬停在上面时都使用 Transform ease。将鼠标悬停在左侧的图像( Angular 色)上时，会慢慢移动到位。页面中间的按钮应该可以放大，但可以轻松放大。

我已经尝试复制有效部分的代码，并分别在按钮上使用该代码，但我仍然无法实现“轻松”过渡

这是我想要的网站部分的 CSS:

#side {
    position: fixed;
    bottom: -10px;
    left: -6px;
}

.magna {
    height: 400px;
    width: auto;
}

.moving {
    position: relative;
    transition: transform 0.3s ease;
    transform: translateY(10px);
}

.moving:hover {
    transform: translateX(5px);
}

这是按钮的 CSS，不会缓入:

#social {
    margin: 0px auto;
    text-align: center;
    margin-top: calc(97vh - 500px);
}

.social-icon {
    width: 80px;
    height: 80px;
    margin: 0px auto;
    transition;
    transform 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-8px);
    transform: scale(1.12);
}

.middle {
    padding: 0px 50px 0px 50px;
}

可以在以下位置找到该元素:http://51.38.83.57/

我正在寻找中心刻度中的按钮来增加但缓和到新尺寸而不是捕捉到新尺寸

Answer 1

之前的代码是:

.social-icon:hover { transform: translateY(-8px); transform: scale(1.12); }

更改为:

.social-icon:hover { transform: translateY(-8px) scale(1.12); }

cYrixmorten 的建议是正确的