Question

背景

尝试为未来创造美学上令人愉悦的链接悬停

当前的JSFiddle：

FF浏览器

body {
    color:#ffffff;
    font-family:"Helvetica";
    font-size:12pt;
    background-color:#000000;
    font-weight:bold;
}
a:link {
    color:white;
    text-decoration:none;
}
a:hover {
    animation: myhover 1s;
    transition-timing-function: ease-in-out;
    font-weight: bold;
}
@keyframes myhover {
    from {
        background-color: black;
        color: white;
    }
    to {
        background-color: white;
        color: black;
    }
}

问题：

转换适用于与效果有关的内容，但由于某些原因，即使您将光标保留在链接顶部，它也会恢复到FROM状态，甚至没有从TO返回到FROM。

需要：

要保持TO效果需要进行哪些代码更改，直到您将光标移出悬停的LINK并将效果还原为FROM？

代码类型限制：

我不希望在解决方案中使用JavaScript或JQuery，只有CSS和HTML。

非常感谢阿尔

Answer 1

您的问题分为两部分：

1）如何保留当前动画状态？

将animation-fill-mode添加到您的CSS规则中：

a:hover {
    -webkit-animation: myhover 1s;
    animation: myhover 1s;
    transition-timing-function: ease-in-out;
    font-weight: bold;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

2）你如何回归＆＃34; From＆＃34;过渡

相当直接 - 您设置了＆＃34;默认＆＃34;链接的动画属性。

a:link { -webkit-animation: nohover 1s; animation: nohover 1s; color:white; text-decoration:none; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

您可能遇到的唯一问题是页面加载。在发生任何交互之前，您会注意到动画启动（对于基于-webkit的浏览器）。如果没有JavaScript，您需要考虑这一点以及动画的外观。

演示的小提琴：http://jsfiddle.net/6hxhxg5t/

Answer 2

您需要将动画的animation-fill-mode设置为forwards，以保留最后一个关键帧的状态。

animation: myhover 1s forwards;

或

animation-name: myhover;
animation-duration: 1s;
animation-fill-mode: forwards;

Option 1 Demo | Option 2 Demo

注意：

该示例使用-webkit-前缀，因为我在Chrome上测试，但同样适用于-moz-前缀或没有任何前缀。
如果不添加额外的代码，则无法实现对鼠标悬停的反向影响，因为animation不像transition那样有效。使用JavaScript / jQuery可以更好地实现相反的效果，因为默认情况下基本类不会启动反向动画，也不会在页面加载时出现一次。 Here是一种使用jQuery实现前向和后向动画效果的方法。 jQuery不是必须的，同样可以用vanilla JS完成，但我只是用jQuery来做快速的样本。

选项3：（使用转化代替动画）

如果您的目标只是在鼠标悬停时线性更改background-color和color属性，那么实际上transition是一个更好的选择，而不是使用{{1 }}。过渡可以自动回答您的两个问题。它可以保持最终状态直到鼠标悬停，并且悬停也会导致反向效果发生。

animation

Option 3 Demo

Link Hover上的CSS3动画无法正常工作

背景

当前的JSFiddle：

问题：

需要：

代码类型限制：

2 个答案: