Html 当离开悬停状态CSS3时，松开

另一个CSS3问题。我已经设法在悬停状态下旋转（360度）图像，但它在离开悬停状态时仍保持其速度。理想情况下，我正在寻找一种解决方案，在离开悬停状态时降低速度。我知道有一个属性（放松）来实现这一点，但我似乎无法找到一个有效的解决方案。经过多次尝试，我希望能得到一些建议

标记：

<div class="account-holder">
    <img src="/images/profile/avatar.png" class="my-image"/>
    <p><strong>Welcome</strong>Terry Wingfield</p>
</div>

 <div class="account-holder">
    <img src="/images/profile/avatar.png" class="my-image"/>
    <p><strong>Welcome</strong>Terry Wingfield</p>
 </div>

我已经把它剥回到我原来的样子。如有任何帮助，我们将不胜感激，并欢迎您考虑将上述风格改写为速记

问候你，

读一篇很棒的文章。您将代码放入

.my image

，以进行

悬停关闭（mouseleave）转换。对于
悬停
，您将代码放入
。我的图像：悬停

因此，您的最终代码是：

.my-image {
    /* Slower transition off hover */
    -webkit-transition-duration: 1s; 
       -moz-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;

    -webkit-transition-property: -webkit-transform;
       -moz-transition-property: -moz-transform;
         -o-transition-property: -o-transform;
            transition-property: transform;    
}


.my-image:hover {
    /* Faster transition on hover */
    -webkit-transition-duration: 0.5s; 
       -moz-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;

    -webkit-transform:rotate(360deg);
       -moz-transform:rotate(360deg);
         -o-transform:rotate(360deg);
            transform:rotate(360def);
}

我希望这能起作用。
如果我理解正确，您希望降低更改动画的速度。因此，我对您的
CSS
代码做了一些更改。因此，您的代码如下所示：

标记：

<div class="account-holder">
    <img src="/images/profile/avatar.png" class="my-image"/>
    <p><strong>Welcome</strong>Terry Wingfield</p>
</div>

 <div class="account-holder">
    <img src="/images/profile/avatar.png" class="my-image"/>
    <p><strong>Welcome</strong>Terry Wingfield</p>
 </div>

我希望这能解决您的问题：）
您想在开/关悬停时使用不同的转速吗？@JasonK是的，对不起，我希望在离开悬停状态（关）时使用较慢的转速。谢谢，像做梦一样工作！谢谢你的快速回复。好发现与链接！我可能需要在CSS3上投入一些开发时间。再次感谢。嗨，科尼，谢谢你的回复，但我已经把答案授予了上面的。谢谢你抽出时间。