CSS3动画链接悬停无法正常工作 [英] CSS3 Animation on Link Hover not working properly

问题描述

尝试为未来创造美观的链接悬停

Trying to create an esthetically pleasing linking hover for the future

可在此处查看FF浏览器。

Available here for FF Browser.

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

问题：

b $ b

转换在与效果有关的过程中起作用，但由于某种原因，即使您将光标停留在链接顶部，它也会回到FROM状态，甚至没有从TO到FROM的淡入。

Problem:

The transition works in what concerns the effect, but for some reason, even if you remain with the cursor on top of the link, it reverts to the FROM state without even a fade back from TO to FROM.

需要进行什么代码更改才能保持TO效果，直到将光标移出

What code change is needed to stay at TO effect, until you take the cursor out of the hovered LINK and it reverts the effect to FROM?

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

I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.

很多谢谢
Alban

Many Thanks Alban

推荐答案

您需要设置 animation-fill-mode 转到转发，以保留动画的状态关键帧。

You need to set the animation-fill-mode to forwards for the animation to retain the state as at its last keyframe.

animation: myhover 1s forwards;

或

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

选项1演示 | 选项2演示

注意：

1. 演示使用 -webkit - 前缀，因为我在Chrome上测试，但是同样可以使用 -moz - 前缀或没有任何前缀。


2. 如果不添加额外的代码，因为动画不能像 transition 。使用JavaScript / jQuery可以更好地实现相反的效果，因为反向动画不能在基类上默认启动，而不会在页面加载时出现一次。 这里是一种使用jQuery实现前向和后向动画效果的方法。 jQuery不是必须的，并且可以用vanilla JS来完成，但是我只是使用jQuery做一个快速示例。

1. The demo uses -webkit- prefix as I am testing on Chrome, but the same would work with either the -moz- prefix or without any prefixes.
2. Achieving a reverse effect on hover out would not be possible without adding extra code as animation do not work like transition. The reverse effect would be better achieved with JavaScript/jQuery as the reverse animation cannot be kicked-off by default on the base class without it appearing once on page load also. Here is a way to achieve both the forward and reverse animation effects using jQuery. jQuery is not a must and the same can be done with vanilla JS also but I just used jQuery for doing a quick sample.

---

选项3：（使用transtions而不是动画）

---

Option 3: (Using transtions instead of animations)

如果您的目标只是线性变化鼠标悬停的 background-color 和颜色属性，然后实际上 transition 是一个更好的选择使用而不是动画。转换可以自动回答您的问题。

If your objective is only to linearly change the background-color and the color properties on mouse hover, then actually transition is a much better option to make use of instead of animation. Transitions can automatically answer both of your concerns. It can make the end state retained till the mouse is hovered out and the hover out will also cause the reverse effect to happen.

a:link {
    color:white;
    text-decoration:none;
    transition: background-color 1s, color 1s;
    /*transition: all 1s;*/ /* use this line if you wish to transition all properties */
    transition-timing-function: ease-in-out;    
}
a:hover {
    font-weight: bold;
    background-color: white;
    color: black;
}

选项3演示

这篇关于CSS3动画链接悬停无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！