如何在悬停时创建动画图像？答案

【问题标题】：How to create animation image on hover?如何在悬停时创建动画图像？
【发布时间】：2021-06-29 21:08:20
【问题描述】：

我在 XD 中有一个在悬停时动画的图形。我想在我的网站上实现它。这类似于此屏幕截图here

我尝试使用 CSS 过渡，但无法正常工作。有没有人可以帮助我做到这一点？我的代码如下。

    <div class="graphic"></div>
    <style>
    .graphic{
        width: 500px;
        height: 500px;
        background-image: url(images/Illustration-Idle.svg);
        background-repeat: no-repeat;
        transition: background-image 5s ease-in-out;
    }
    .graphic:hover{
        background-image: url(images/Illustration-Hover.svg);
    }
    </style>

【问题讨论】：

能否请您发布到目前为止您尝试过的代码？没有任何代码，很难猜出你遇到了什么问题:)
我添加了有问题的代码示例@AkshAyAgrawal
jsfiddle.net/7aretodk/1 请检查这个小提琴。您的代码对我来说似乎运行良好。

标签： javascript css animation css-animations css-transitions

【解决方案1】：

您需要将类或 ID 应用于 svg 的公牛和箭头“路径”。然后对它们使用过渡。我建议将您的 SVG 直接放在 div 中。

.bull{
  transition: all 1s ease-in-out;
}

svg:hover .bull{
  transform: translate(-50px, 50px);
}

.arrow{
  opacity:0;
  transition: all 1s ease-in-out;
}

svg:hover .arrow{
    opacity: 1;
    transform: translate(50px,0);
}

【讨论】：