时间戳

首页 > 解决方案 > 动画的问题

html - 动画的问题

问题描述

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

问题是：

  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>

我会感激你的！谢谢！

标签： htmlcssanimation

解决方案

您可以尝试使用@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);
        }
    }

推荐阅读