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

我希望这有效。

Answer 2

如果我正确理解，您希望降低更改动画速度。因此，我对您的CSS代码进行了一些更改。因此，您的代码看起来像this：

标记：

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

我希望这能解决你的问题：）

离开悬停状态CSS3时轻松一下

2 个答案: