离开悬停状态 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

阅读这篇很棒的文章。将代码放在.my-image中，以便进行hover off（鼠标离开）转换。对于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);
}

我希望这有效。

Answer 2

如果我理解正确，您想降低更改动画速度。因此，我对CSS代码进行了一些更改。因此，您的代码如下所示：

标记：

 <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: -webkit-transform 2s ease-in;
   -moz-transition: -moz-transform 2s ease-in;
   -o-transition: -o-transform 2s ease-in;
   transition: transform 2s ease-in;    
}
.my-image:hover 
{
   -webkit-transition: -webkit-transform 1s ease-in;
   -moz-transition: -moz-transform 1s ease-in;
   -o-transition: -o-transform 1s ease-in;
   transition: transform 1s ease-in; 
   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -o-transform:rotate(360deg);
}

我希望这将解决您的问题:)