在我使用fadeIn效果后，按钮悬停效果不工作。

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.iomohits0631penQWjJJEb。

Answer 1

animation-fill-mode: forwards根据你的动画结束设置你的变换函数，这不能被覆盖，这就是为什么只有翻译功能不能用的原因。在悬停功能中，你可以手动将animation-fill-mode设置为none，然后将不透明度设置为1.希望这能奏效 :)

Answer 2

根据 文件,

只有被箱形模型定位的元素才能被转换。根据经验，如果一个元素具有以下条件，它就会被盒子模型定位。display: block.

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

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

这个... transform 不见得 color 工作，所以我做了

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

而它的工作