Question

说我有这样一个按钮：

<button>Some Text</button>

默认情况下，样式表的文本为黑色。

然后我有了这个css：

button {
     transition: color 0.15s ease-out;
     color: rgba(255,255,255,0.75);
}

button:hover {
     transition: color 0.15s ease-out;
     color: #fff;
}

目标是在悬停时从灰色的灰白色变为白色，然后在悬停时再次回到正常的按钮状态。

问题是当我第一次加载页面时，按钮的黑色初始颜色被我在按钮上应用的过渡覆盖，人们可以简单地看到黑色文本淡入灰白色。

如何使初始状态加载而不动画？或者更确切地说，有没有办法实现像:hover-off这样的东西来控制动画只在悬停状态关闭时？

Answer 1

抱歉，我的评论声誉较低。你的动画不起作用，请清楚说明你想做什么？

你试图实现这个目标吗？

button:hover {
transition: 0.5s ease-out;
color : white;
}

Answer 2

如果您需要加载一些JavaScript，可以将其放在 CSS之后的<head> 中。有点黑客，但它确实有效。

HTML解析被<script>标记阻止，这些标记会发起对外部资源的请求。我想CSS动画不会在<body>被完全解析之后才开始，这就是它起作用的原因。

在css中禁用初始动画状态？

2 个答案: