CSS所有样式在页面加载时随过渡应用

我有一些代码可以在鼠标悬停时设置按钮的动画，但是当我重新加载页面时，css会应用我在按钮和按钮文本上设置的1s转换

我将转换设置为只在按钮的宽度上工作，这很有效，但是如果我想设置多个对象的动画，我必须选择只设置这些对象的动画，这有点烦人，因为我以前没有遇到过这个问题

我在Chromebook上使用Chrome 72.0.3626.122

html{
宽度：100%；
身高：100%；
}
身体，
跨度{
保证金：0；
填充：0；
}
.按钮{
宽度：120px；
高度：40px；
边界：无；
背景颜色：鲑鱼；
过渡：1s轻松；
}
.按钮：悬停{
宽度：200px；
}
.按钮文本{
颜色：白色；
字号：17px；
过渡：1s轻松；
}
.按钮：悬停.按钮文本{
颜色：浅灰色；
}

按钮悬停
盘旋我

这将在页面重新加载后1秒内应用所有css，而不是立即加载所有css并在悬停状态下转换

因此，您希望在页面加载后1秒，按钮自动变宽，文本变暗，对吗

CSS动画应该可以帮助您，因为它们是自调用的，而CSS转换需要一个触发事件

// Call the keyframes
.button { animation: expand 0.55s linear 2s 1 normal forwards running; }
.button-text { animation: color-shift 0.55s linear 2s 1 normal forwards running; }

// Keyframes
@keyframes expand {
    0% { width: 120px; }
    100% { width: 200px; }
}

@keyframes color-shift {
    0% { color: white; }
    100% { color: lightgray; }
}

---

我已经用你的HTML和CSS来显示差异，还有一些额外的细节。希望这能有所帮助。

装载货物后看起来很好me@StefanBob当我尝试代码片段时，它可以工作，但当我在自己的页面上重新加载浏览器时，它就不工作了