动画的问题

Question

我正在尝试在图像上添加动画效果，以便当有人将鼠标悬停在图像上时，它会以特定角度移动然后返回。它工作但不正确。所以，我正在寻求您的帮助和建议。

问题是：

1. 由于某种原因，任何图像都会在悬停时向下移动到另一个图像。您需要将鼠标悬停在每个图像上以复制此问题。我已尝试修复它，但没有任何效果。
2. 悬停时，图像会线性移动，但一旦我取消悬停该图像，它就会立即返回，无需任何时间。我希望它在向前移动时线性返回。它应该工作均匀。请帮忙。

这是页面网址：https://aapsiindia.org/welcome/

Css 代码如下：

<style>

.vcard{
vertical-align: middle;
text-align:center;
column-count: 3;
column-gap: 0.5%;
width: 100%;
position: relative;
}

 .card{
box-shadow: 3px 8px 8px 3px grey;
vertical-align: middle;
float: center;
text-align: center;
padding: 3%;
}

 .card:hover {
opacity: 0.5;
box-shadow: 3px, grey;
transform: rotate(3deg);
transition: linear 2s;
}

</style>

我会感激你的！ 谢谢！

Answer 1

您需要始终在卡片上设置过渡属性，而不仅仅是在悬停时。

所以，将transition: linear 2s; 放入 .card 而不是 .card:hover

Answer 2

您可以尝试使用@keyframes 制作动画，因为它们很流畅。

 .card.over{
    box-shadow: 3px 8px 8px 3px grey;
    vertical-align: middle;
    float: center;
    text-align: center;
    padding: 3%;
    animation-name: ontop;
    animation-duration:5s;
    }

   .card.out {
   animation-name: away;
   animation-duration:2s;

}
    
    @keyframes away {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(10deg);
        }
    }
    @keyframes ontop {
        from {
            transform: rotate(10deg);
        }
        to {
            transform: rotate(0deg);
        }
    }