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

animation-fill-mode：正向设置基于无法覆盖的动画结束来设置变换功能。多数民众赞成在唯一的翻译功能不起作用的原因。在悬停功能期间，您可以手动将animation-fill-mode设置为none，然后将不透明度设置为1。希望这可以起作用：）

Answer 2

根据docs

只能变换盒模型定位的元素。根据经验，如果框元素具有display: block，则框模型会将其定位。

我修改了您的代码以进行检查：

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

transform无效，但是color有效，所以我有效

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

成功了

我使用fadeIn效果后，按钮悬停效果不起作用

2 个答案: