使用淡入效果后按钮悬停效果不起作用

Question

我希望我的按钮先淡入，然后我希望在按钮淡入后出现悬停效果。

代码可以在这里找到。按钮淡入后如何激活悬停效果。

这里是按钮的 HTML 代码：

<a href="#" class="btn btn-white">discover our tours</a>

这里是 css 代码：

.btn:link,
.btn:visited{
    text-decoration: none;
    text-transform: uppercase;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 30px;
    opacity: 0;

    animation: fadeIn 1s ease-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.btn:hover{
    transform: translateY(-3px);

}

.btn:active{
    transform: translateY(-1px);
}

.btn-white{
    background-color: red;
    color: white;
}

@keyframes fadeIn{
    0%{
        opacity: 0;
        transform: translateY(-30px);
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}

整个代码也可以在这里查看https://codepen.io/mohits0631/pen/QWjJJEb

Answer 1

根据 docs、

Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block.

我修改了你的代码来检查：

  .btn:hover{
    transform: translateY(-3px);
    color: green;
}

transform 不起作用，但 color 起作用了，所以我做了

.btn:hover{
  display:block;
  transform: translateY(-3px);
  color: green;
}

成功了

Answer 2

animation-fill-mode: forwards 根据动画的结尾设置你的变换函数，它不能被覆盖。这就是只有翻译功能在那里不起作用的原因。在悬停功能期间，您可以手动将动画填充模式设置为 none，然后将不透明度设置为 1。希望这有效:)

使用淡入效果后按钮悬停效果不起作用

The button hover effects do not work after i use the fadeIn effect

css

css-transitions

css-animations