完全悬停动画持续时间快速鼠标悬停/鼠标移动？

I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.

我对图像有悬停效果。如果您将鼠标悬停在鼠标上并使用鼠标停留在那里,则将以给定的持续时间执行转换。

I have also done the correct transition when you leave the spot.

当你离开现场时,我也做了正确的过渡。

Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.

现在,我希望悬停转换以给定的持续时间开始,无论你是否只是在图像上快速停留了1毫秒。

Is this only possible with javascript?

这只能用javascript吗?

.example { position: absolute;
             left: 0;
             height:320px;
             bottom: 0;
             width: 100%;
             background: #000;
             background-color: rgba(255, 255, 255, 0.4);
             opacity:0;
             -webkit-transition: background-color 2s ease-out;
             -moz-transition: background-color 2s ease-out;
             -o-transition: background-color 2s ease-out;
             -ms-transition: background-color 2s ease-out;

             transition: opacity 0.5s ease-in-out;
             -moz-transition: opacity 0.5s ease-in-out;
             -webkit-transition: opacity 0.5s ease-in-out;
             -o-transition: opacity 0.5s ease-in-out;
            -ms-transition: opacity 0.5s ease-in-out;
             transition: opacity 0.5s ease-in-out;
             text-align: center;
             line-height: 299px;
             text-decoration: none;
             color: #000000;
             font-size:30pt;
          }

   .image:hover .example { background-color: rgba(255, 255, 255, 0.4);
                         -webkit-transition: background-color 0.5s  ease-in-out;
                         -moz-transition: background-color 0.5s  ease-in-out;
                         -o-transition: background-color 0.5s  ease-in-out;
                         -ms-transition: background-color 0.5s ease-in-out;
                         transition: background-color 0.5s ease-in-out;
                         -webkit-transition: opacity 0.5s  ease-in-out;
                         -moz-transition: opacity 0.5s  ease-in-out;
                         -o-transition: opacity 0.5s  ease-in-out;
                         -ms-transition: opacity 0.5s  ease-in-out;
                         transition: opacity 0.5s ease-in-out;
                         opacity:1;
                       }

With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)

有了这个,如果我将鼠标悬停在图像上,我的文本和背景颜色会生成动画,当我离开图像时,文本和背景颜色会动画出来。它工作正常。 (尽管我上面的代码现在有点未分类)

So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.

因此,我想要的是即使我只是快速悬停在图像上并返回,淡入淡出动画也将完全执行。

I think it is not possible is it? (with css only i mean)

我觉得这不可能吗? (只有我的意思是css)

1 个解决方案

#1

I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.

我担心,你必须使用一些Javascript,因为据我所知,没有javascript就无法做到这一点。

Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation

在悬停时添加一个类,并在动画端删除它。请参阅此答案以了解如何操作 - css3动画on:hover;强制整个动画

PS: I would have put this is a comment, but I don't have the privileges right now.

PS:我会说这是一个评论,但我现在没有特权。

#1