所以我想在我的页眉中有一些元素，它们使用 CSS3 关键帧在页面加载时向上滑动和淡入。虽然动画本身运行良好，但具有延迟的元素会在动画之前以最终状态出现一瞬间。我目前不知道任何 JavaScript，所以我希望有一个纯粹在 HTML/CSS 中的解决方案。可以做到吗？
* {
font-family: 'Varela', sans-serif;
}
body {
padding: 0;
margin: 0;
background-color: rgb(90, 120, 240);
}
a {
text-decoration: none;
color: inherit;
font-size: inherit;
}
/***************************
HEADER
***************************/
.header-banner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: 30px;
height: 250px;
-webkit-animation: slide-in 1s;
-moz-animation: slide-in 1s;
-o-animation: slide-in 1s;
animation: slide-in 1s;
padding: 0 0 60px 0;
}
.header-banner h1,
.header-banner h2,
.header-banner a {
font-family: 'Varela', sans-serif;
color: white; …