禁用在页面加载时运行的CSS动画(没有JS，只有HTML和CSS)

Question

我有一个问题，我做了一个检查标记CSS动画在我的网站，但他们开始在页面加载，它不应该，它应该只触发在悬停/不悬停。文本需要折叠，就像(.)当价格超过描述时

所有代码都可以在这里获得：https://github.com/Douwdy/Projet-3

• And，您可以在这里获得预览：https://douwdy.github.io/Projet-3/menu-1.html

有人能帮我解决吗？没有Js的建议。

Answer 1

对于页面加载CSS动画，我看了一下，我会使用transition & transform而不是animation

因此，如果您删除css中的动画(check-box__in和check-box__out)，并替换为下面的转换：

.menu-selector-box:hover .menu-selector-box__validator {
    transition: transform 1s ease-out;
    transform: translateX(-60px);
}
.menu-selector-box__validator {
    transition: transform 1s ease-out;
}
.menu-selector-box-text__price {
    transition: transform 1s ease-out;
}
.menu-selector-box:hover .menu-selector-box-text__price {
    transition: transform 1s ease-out;
    transform: translateX(-60px);
}

对于文本问题，我建议在menu-selector-box-text上设置一个宽度(我使用275 on )，然后在悬停时减少宽度(我使用了225 on )，您可以在减少宽度时使用与上面相同的转换(transition: width 1s ease-out;)。

然后，需要将下面的样式应用于<h5>和<p>标记。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

​

​