离开悬停状态CSS3时轻松一下(Ease out on when leaving hover state CSS3)

另一个CSS3问题。 我设法在悬停时旋转(360)图像，但是当它离开悬停状态时它保持它的速度。 理想情况下，我正在寻找一种解决方案，以便在离开悬停状态时减慢速度。 我知道有一个属性(缓解)来实现这一点，但我似乎无法找到一个有效的解决方案。 经过多次尝试，我希望得到一些指示。

标记：

样式：

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

}

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

问候，

Another CSS3 question. I have managed to rotate(360) an image on hover but it retains it's speed when leaving the hovered state. Ideally I'm looking for a solution to slow the speed when leaving the hovered state. I know there's a property(ease-out) to achieve this but I can't seem to get a working solution. After many attempts, I was hoping to get some pointers.

Markup:

Styles:

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

}

I have stripped it back to what I originally had. Any help would be appreciated and thoughts on re-writing the styles above to shorthand would be very welcome.

Regards,

原文：https://stackoverflow.com/questions/26956897

更新时间：2020-09-05 09:09

最满意答案

阅读这篇很棒的文章。 您将代码放在.my-image以hover off (mouseleave)过渡。 并.my-image:hover你将你的代码放在.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);

}

我希望这有效。

Read this awesome article. You put your code in .my-image for hover off (mouseleave) transitions. And for hover on you put your code in .my-image:hover.

So your final code would be:

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

}

I hope this works.

相关问答

你不需要任何js代码来做到这一点。 使用:hover pseudoclass代替： #div-right{

display: inline-block;

/*border added for debug purpose*/

border: 1px solid rgba(0,0,0,0.1);

width: auto;

}

#div-right:hover>a{

font-size: 30px;

color: black;

font-weight:

...

我建议将事件移动到链接，所以根据http://jsfiddle.net/9jMqc/2/移动它们 .tunein a {

display: block;

-webkit-transform:rotate(12deg);

-moz-transform:rotate(12deg);

}

.tunein a:hover{

animation: rotate 0.5s ease-out;

-moz-animation:rotate 0.5s

...

出现此问题的原因是您将鼠标悬停在动画元素上。 旋转发生时，鼠标悬停的元素会改变其大小。 结果：在短时间内光标不再处于悬停位置。 (自己看，为图标设置一个彩色边框并将其悬停)。 如果鼠标不能保持完全不动的话，这将随后重置事件... 为避免这种情况，请将图标设置在容器中，并在容器悬停时执行动画。 HTML / CSS .wrapper:hover .fa-stack{

color: red;

transition: 0.9s;

transform: rotateY(180

...

CSS转换更清晰： .fadeInUp {

-webkit-transition: all 300ms ease;

-moz-transition: all 300ms ease;

-o-transition: all 300ms ease;

-ms-transition: all 300ms ease;

transition: all 300ms ease;

-webkit-transform: tran

...

阅读这篇很棒的文章。 您将代码放在.my-image以hover off (mouseleave)过渡。 并.my-image:hover你将你的代码放在.my-image:hover 。 所以你的最终代码是： .my-image {

/* Slower transition off hover */

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transiti

...

感谢@Nikki，我可以找到一个解决方案。 使用JS，我可以在DOM完全加载时调用此函数，这样我强制css启动。 var listdot = document.getElementByClassName("dot");

function Start() {

for (var i = 0; i < listdot.length; i++) {

listdot[i].style.WebkitAnimation = "example";

}

}

Thanks to @N

...

menu li ul li a:hover {

width: 220px;

}

将上面的类添加到CSS.Hope上面的代码工作 menu li ul li a:hover {

width: 220px;

}

Add the above class to CSS.Hope the above code works

您需要为宽度设置动画。 无需使用关键帧来执行此操作，只需在悬停中添加新参数，并添加到平滑动画的过渡 mark {

background-color: transparent;

}

a span.visual ,

a span.merchandising {

display: inline-block;

width:0;

opacity: 0;

-webkit-transition: all 0.4s linear; /* Safari */

tra

...

关键帧设置的规则似乎在级联中具有更高的重要性。 我不确定这是否应该如此，但@media规则具有最高的重要性。 @keyframes也应该太或这是一个错误。 级联规范没有具体提及它们。 而不是使用pause ，您可以完全删除动画。 #box a:hover {-webkit-animation: none;color:red; font-size: 50px;}

http://jsfiddle.net/rvBS2/1/ Rules set by the keyframe seem to have

...

您需要添加动画延迟以允许转换完成，因为它会在动画开始时恢复到scale(.7) 。 更新了jsFiddle -webkit-animation-delay:1s;

编辑 我意识到我在这里发布的答案并不完全正确。 确实，延迟动画了从大回到小回的过渡，但是如果你在它的扩展时将其悬停在脉冲球上，它会在动画到大规模之前跳回到它的0值.7。 更新了演示 我提出了一个修复程序，只是使用一些JavaScript来修复它基于这篇文章 。 你必须稍微改变一下CSS，但结果并不是很明显。 这是更新的代码 /* CS

...