CSS3 变换 - 处理悬停后的行为答案

【问题标题】：CSS3 Transform - handling the after-hovering behaviorCSS3 变换 - 处理悬停后的行为
【发布时间】：2013-07-06 19:02:09
【问题描述】：

在这个 CSS3 代码中，当我将鼠标悬停在类上时，它会旋转 360 度，但当我离开类时，它会恢复原样。

问题：即使我离开了，我怎样才能让班级轮班？

下面的代码：

.class{  transition: transform 1s; }
.class:hover{  transform: rotate(360deg); }

【问题讨论】：

如果您将其切换为动画并将动画设置为运行infinite，那么应该可以完美运行。

标签： css transform css-transitions css-animations css-transforms

【解决方案1】：

没有直接纯粹的css答案，你应该使用js或jquery。
这是 jquery 版本：

$('.class').on('mouseEnter', function(){
    $(this).trigger('hover');
});

但是还有其他一些方法可以做这样的事情

【讨论】：

【解决方案2】：

您需要在normal 和hovered 状态下使用transition 属性。

运行演示：CLICK HERE

<div class="both" > I'll animate on hover and on blur </div>
<div class="hover"> I'll animate on hover only        </div>
<div class="blur" > I'll animate on blur only         </div>

两者

Normal ----1s----> Hovered ----1s----> Normal

1s 的转换总是应用于transform，在悬停时执行；那么它将双向工作。

.both {
    transition: transform 1s;
}

.both:hover {
    transform: rotate(360deg);
}

悬停

Normal ----1s----> Hovered ----0s----> Normal

它将使用 1s 的过渡到达悬停状态，但它将使用 0s 的过渡从悬停状态到达正常状态

.hover {    
    transition: transform 0s;
}

.hover:hover {
    transition: transform 1s;
    transform: rotate(360deg);
}

模糊

Normal ----0s----> Hovered ----1s----> Normal

它将使用transition 的0 来达到悬停状态，但它将使用1 的transition 从悬停状态达到正常状态

.blur {    
    transition: transform 1s;
}

.blur:hover {
    transition: transform 0s;
    transform: rotate(360deg);
}

【讨论】：