html - 离开悬停状态时缓出 CSS3

Question

另一个 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);
   }

我已经把它剥离回原来的样子了。任何帮助将不胜感激，并且非常欢迎将上述样式重写为速记的想法。

问候，

Answer 1

阅读this很棒的文章。您将代码放在 .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);
}

我希望这能奏效。