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>

款式：

.my-image
{
  -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
   transition-duration: 0.8s;

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

  .my-image:hover
  {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
     -o-transform:rotate(360deg);
   }

我把它剥去了，恢复了原来的样子。如有任何帮助，我们将不胜感激，并欢迎您考虑将上述风格改写为速记。
当做，

最佳答案

读一篇很棒的文章。您将代码放入.my-image中进行hover off（mouseleave）转换。对于hover on，则将代码放入.my-image:hover。
所以你的最终密码是：

.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);
}

我希望这行得通。