我想通过 CSS 在 Web 项目上制作标题动画。我希望每当每个标题达到其动画的 50% 时，它们就会向上移动并稍微放大。换句话说：我希望它们彼此独立地扩展，而不是一起扩展。
但是使用下面的代码，确实会发生这样的情况：
@keyframes moveup1 {
0% {
transform: translateY(400px) scaleX(1);
}
50% {
transform: translateY(0) scaleX(1.2);
}
100% {
transform: translateY(-400px) scaleX(1);
}
}
@keyframes moveup2 {
0% {
transform: translateY(400px) scaleX(1);
}
49% {
transform: translateY(0) scaleX(1.2);
}
100% {
transform: translateY(-400px) scaleX(1);
}
}
@keyframes moveup3 {
0% {
transform: translateY(400px) scaleX(1);
}
51% {
transform: translateY(0) scaleX(1.2001);
}
100% {
transform: translateY(-400px) scaleX(1);
}
}
.headlinemoveup1 {
animation-name: moveup1;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.headlinemoveup2 {
animation-name: moveup2;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.headlinemoveup3 {
animation-name: moveup3;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}<div class="headlinemoveup1">Element 1</div>
<div class="headlinemoveup2">Element 2</div>
<div class="headlinemoveup3">Element 3</div>如您所见，我已经将动画分成了三个不同的动画，并尝试为它们提供稍微不同的值。然而，它们仍然一起扩展。
如果我知道如何解决这个问题，我将不胜感激。 谢谢， 朱利叶斯
最终代码：
<html>
<head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
font-family: "poppins";
}
@keyframes moveup1 {
0% {
transform: translateY(200px);
}
50% {
transform: scaleX(1.17);
}
100% {
transform: translateY(0px);
}
}
@keyframes moveup2 {
0% {
transform: translateY(200px);
}
45% {
transform: scaleX(1.12);
}
100% {
transform: translateY(0px);
}
}
@keyframes moveup3 {
0% {
transform: translateY(200px);
}
40% {
transform: scaleX(1.15);
}
100% {
transform: translateY(0px);
}
}
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 70px;
}
.headlinemoveup1 {
animation: moveup1 forwards 5s;
font-size: 2rem;
font-weight: 800;
}
.headlinemoveup2 {
animation: moveup2 forwards 5s;
font-size: 2rem;
font-weight: 800;
}
.headlinemoveup3 {
animation: moveup3 forwards 5s;
font-size: 2rem;
font-weight: 800;
}
</style>
</head>
<body>
<div class="container">
<div class="headlinemoveup1">Element 1</div>
<div class="headlinemoveup2">Element 2</div>
<div class="headlinemoveup3">Element 3</div>
</div>
</body>
</html>您的代码中存在一些问题，例如您没有将这三个 div 包含在容器中，导致这些 div 在屏幕上的位置错误。由于您可以在 css 中使用动画属性的简写，因此您无需为 div 指定每个动画属性。
主要问题是 @keyframes 部分，div 的翻译有点古怪，所以它没有按例外执行。另外，您将动画迭代计数设置为无限，我认为这也引起了一些问题。
如果解决了您的问题，请告诉我，如果您还有其他疑问，可以回复！