离开悬停状态CSS3时轻松一下(Ease out on when leaving hover state CSS3)
另一个CSS3问题。 我设法在悬停时旋转(360)图像,但是当它离开悬停状态时它保持它的速度。 理想情况下,我正在寻找一种解决方案,以便在离开悬停状态时减慢速度。 我知道有一个属性(缓解)来实现这一点,但我似乎无法找到一个有效的解决方案。 经过多次尝试,我希望得到一些指示。
标记:
WelcomeTerry Wingfield
样式:
.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:
WelcomeTerry Wingfield
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
...