Question

我担心有类似的问题，但我没有找到具体的解决方案，所以我创造了一个小提琴：

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

在这个（简化的）动画中，除鼠标离开整个盒子外，一切正常。动画从原始状态开始，但是突然。基本过渡时间（和易用性）被忽略，因为似乎关键帧具有更高的重要性并覆盖它。

我需要的是关键帧动画触发AND当鼠标离开时它应该平稳地回到原始状态。

是否有解决方案 1）在纯CSS中 2）可能只有一些小的javascript？

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

修改

在实施Toni提供的解决方案后，这是正确的小提琴：

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

再次感谢托尼！

编辑2：

可悲的是，还有一个问题。有关关键帧的部分不会在Firefox上执行，即使我在这个小提琴中添加了所有-moz-供应商：

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

为什么？

PS：就我现在测试而言，它甚至可以在Opera（Beta）中运行。只有浏览器阻止是Firefox

编辑3： 正确的（工作）代码现在在这个小提琴中：

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

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

Answer 1

这是实现此目的的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在unhover上重新应用原始类属性。

动画确实会在页面加载时向后触发，因此您可能会考虑调整动画以考虑到这一点，例如this example，从this answer收缩。或者，使用javascript（或jquery），如this example，其中动画是通过使用jquery向目标添加和删除类来触发的：

的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

使用这两者会引起混淆，特别是如果您尝试为相同的属性设置动画。

最后需要 css供应商前缀

关键帧CSS动画会覆盖悬停转换

1 个答案: