关键帧CSS动画会覆盖悬停过渡

问题描述

恐怕与此类似的问题，但是我没有找到具体的解决方案，所以我创建了一个小提琴:

I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a fiddle:

http://jsfiddle.net/Garavani/yrnjaf69/2/

<div class= "category_item">

    <div class= "cat_button">
        <span class="title_cat">TEXT</span>
    </div>

</div>

CSS:

.category_item {
    position: absolute;
    background-color: #999;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 200px;
    /* seems to be overwriten by animation keyframes */
    -webkit-transition: -webkit-transform 0.215s ease-in-out;
            transition: transform 0.215s ease-in-out;
    cursor: pointer;
}

.category_item:hover {
    -webkit-animation-name: easeBack;
            animation-name: easeBack;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

@-webkit-keyframes easeBack {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);

    }
    100% {
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
    }
}

.cat_button {
    position: absolute;
    width: 200px;
    height: 55px;
    bottom: 0;
    border: 2px solid #fff;
    color: #fff;
    -webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
    transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
}

.category_item:hover .cat_button {
    background: #fff;
    border-color: #fff;
    color: #511c5b;
}

在这个(简化的)动画中，除了鼠标离开整个盒子时，其他所有东西都可以正常工作.动画从其原始状态开始，但是突然.基本的过渡时间(和易用性)被忽略了，因为似乎关键帧具有更高的重要性并覆盖了它.

In this (simplified) animation everything works fine except for when the mouse leaves the entire box. The animation starts from it original state, but abruptly.The basic transition time (and ease) is ignored because it seems the keyframes have higher importance and overwrite it.

我需要的是关键帧动画触发，并且当鼠标离开时，它应该可以平滑地返回到原始状态.

What I need is the keyframe animation triggering AND when the mouse leaves it should turn back to the original state smoothly.

是否有解决方案1)在纯CSS中2)可能只使用一些小javascript?

Is there a solution for this1) in pure CSS2) maybe with some little javascript only?

提前感谢您的帮助和想法！

Thanks in advance for help and ideas!

在实施了Toni提供的解决方案之后，这才是正确的小提琴:

After implementing the solution offered kindly by Toni this is the correct fiddle:

http://jsfiddle.net/yrnjaf69/40/

再次感谢Toni！

可惜的是，还剩下一个问题.即使在这个小提琴中我也添加了所有-moz-供应商，但带有关键帧的部分也不在Firefox上执行:

Sadly, yet, there is one question left. The part with the keyframes is not executed on Firefox even though I added all the -moz- vendors, too, in this fiddle:

http://jsfiddle.net/dr6Ld0wL/1/

为什么?

PS:据我目前测试，它甚至可以在Opera(Beta)中使用.唯一阻止浏览器的是Firefox

PS: As far as I tested for now it works even in Opera (Beta). Only browser resisting is Firefox

正确的(有效的)代码现在位于此小提琴中:

EDIT 3:The correct (working) code is now in this fiddle:

http://jsfiddle.net/dr6Ld0wL/16/

还需要在供应商前缀中明确划分关键帧.耶稣基督.那些前缀...

The keyframes also need to be explicitly divided in vendor prefixes. Jesus Christ. Those prefixes…

推荐答案

这是 jsfiddle 可以达到目的.

.demo-hover {
    position: relative;
    margin: 100px;
    animation: complexProcessReversed 2s ease-in forwards;
    width: 160px;
    height: 160px;
    background-color: #88d;
}
.demo-hover:hover {
    animation: complexProcess 2s ease-in forwards;
    width: 100px;
    height: 100px;
    background-color: #732;
}

@keyframes complexProcess {
    /* keyframes */
}

@keyframes complexProcessReversed {
    /* keyframes (opposite) */
}

动画输出是在主类的CSS中分配的，然后悬停状态在悬停时开始，而CSS在取消悬停时重新应用原始类的属性.

The animation out is assigned in the css in the main class, then the hover state kicks in on hover and css re-applies the original class properties on unhover.

动画的确会在页面加载时向后触发，因此您可能想考虑对动画进行调整以考虑到这一点，例如此示例，摘自此答案.另外，也可以使用javascript(或jquery)，例如此示例，其中通过添加和删除动画来触发使用jquery将目标分类到目标:

The animation does trigger backwards on page load, so you might like to think of tweaking your animation to take this into account, like this example, pinched from this answer. Alternatively, use javascript (or jquery), like this example where the animations are triggered by adding and removing classes to the target using jquery:

JavaScript

JavaScript

$('.demo-hover').hover(
    function() {
        // mouse in
        $(this).removeClass('forwards--reversed').addClass('forwards');
    },
    function() {
        // mouse out
        $(this).removeClass('forwards').addClass('forwards--reversed');
    }
);

CSS

.forwards {
    animation: complexProcess 2s ease-in forwards;
    width: 100px;
    height: 100px;
    background-color: #732;
}

.forwards--reversed {
    animation: complexProcessReversed 2s ease-in forwards;
    width: 160px;
    height: 160px;
    background-color: #88d;
}

此外，我将使用 @keyframe 或 transition .如果只需要简单地从 n 更改为 m ，则使用 transition ，但是当事情变得更加复杂时，例如一件事情平均变化超过100％，但直到播放了50％的动画后，另一件事才开始，然后使用 @keyframe

Also, I'd use @keyframe or transition. Use transition if you just need a simple even change from n to m but when things are more complex, such as one thing changing evenly over 100% but another thing not starting until 50% off the animation has played, then use a @keyframe

同时使用这两种方法会引起混乱，尤其是在尝试为相同的属性设置动画的情况下.

Using both will cause confusion, especially if you're trying to animate the same properties.

最后需要 css供应商前缀

这篇关于关键帧CSS动画会覆盖悬停过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！