快速 mouseover/mouseout 的完整悬停动画持续时间？

Question

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

你离开现场的时候我也做了正确的转场。

现在，我希望悬停过渡以给定的持续时间开始，无论您是否只是将鼠标悬停在图像上 1 毫秒。

只有 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;
                       }

有了这个，如果我将鼠标悬停在图像上，我的文本和背景颜色就会动画化，当我离开图像时，文本和背景颜色就会动画化。它工作正常。（虽然，我上面的代码现在有点乱）

所以，我想要的只是淡入和淡出动画将完全执行，即使我只是快速悬停在图像上并返回。

我觉得不可能吧？（我的意思是只有 css）

Answer 1

恐怕，您将不得不使用一点 Javascript，因为据我所知，没有 javascript 是不可能的。

在悬停时添加 class，并在动画结束时将其删除。请参阅此答案以了解如何执行此操作 - css3 animation on :hover; force entire animation

PS：我本来想说这是一条评论，但我现在没有权限。

快速 mouseover/mouseout 的完整悬停动画持续时间？

Full hover animation duration with quick mouseover/mouseout?

html

css

hover

transition

state