如何将动画与body背景一样应用于头部

Question

我想知道如何将相同的身体动画应用于我的头部？

下面的代码到我的CSS：

/* =======================
BODY ANIMATION FOR LOGIN PAGE
=========================*/
#login-body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/*=======================
Header Section
========================*/
.header {
position: sticky;
z-index: 111;
/* background-color: var(--color-sub); original color background */
background: rgb(252, 70, 107);
background: linear-gradient(90deg, rgba(252, 70, 107, 1) 0%, rgba(63, 94, 251, 1) 63%);
padding: 1.5rem 0;
animation: gradient 15s ease infinite;
}
.header>.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo>img {
height: 3.8rem;
}
.header__nav>ul {
display: inline-flex;
align-items: center;
list-style: none;
gap: 6.5rem;
}
.header__menuItem>a {
color: var(--color-light);
font-weight: 400;
font-family: var(--test-h2);
}
.toggle-menu>span {
display: none;
}
.header__nav input[type='checkbox'] {
display: none;
}
.header__nav input[type='checkbox']:checked~.header__menu {
opacity: 1;
pointer-events: all;
}
.project--thumbnail {
height: 250px;
object-fit: cover;
}
@media screen and (max-width: 800px) {
.header__logo {
position: relative;
z-index: 999;
}
.toggle-menu {
position: relative;
}

我试图申请标题动画，但它似乎不起作用。你为什么不应用我的动画？当我试图改变的时候，似乎什么都没有改变？是否有可能标头无法接收动画

Answer 1

/*=======================
Header Section
========================*/
.header {
position: sticky;
z-index: 111;
/* background-color: var(--color-sub); original color background */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
padding: 1.5rem 0;
background-size: 400% 400%;
animation: waveColors 16s ease infinite;
}

/* Animation Wave Color */
@-webkit-keyframes waveColors {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}