CSS渐变动画出现停顿

Question

我正在尝试为我的网站制作 CSS 背景动画。但是，当我运行程序并查看我的站点时，渐变似乎停滞不前，它没有移动。这是 CSS 动画的问题，还是速度太慢了？这是发生了什么......

/* Declare some variables for CSS */
:root {

    /* Website fonts */

    /*    Titles     */ --poppins:         "Poppins",         sans-serif;
    /*  Normal text  */ --source-sans-pro: "Source Sans Pro", sans-serif;

    /* Colors */

    /* A nice, warm(ish) yellow |   Turbo Yellow   */
    --yellow: 255, 225, 0;

    /* A deep, near-black grey  |     Cod Grey     */
    --grey: 23, 23, 23;

    /* A dark, sharp violet     |  Electric Violet */
    --violet: 170, 0, 200;

    /* A deep, pinkish red      |     Monza Red    */
    --red: 189, 0, 57;

}

/* Basic text setup */
.text {

    /* Don't have the text all the way to the left */
    margin: 40px;

    /* Set a good font */
    font-family: var(--source-sans-pro);

}

/* Opening divider */
.opener {

    /* Align it properly */
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;

    /* Gradient background, slightly darkened */
    background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
    
    /* Make sue to cover the whole page */
    background-size: cover;

    /* Set a background color */
    background-color: var(--grey);

    /* Make text in this divider white -- contrasts nicely with background */
    color: white;

    /* Animate the gradient! */
    -webkit-animation: background 2s ease infinite;
    -moz-animation:    background 2s ease infinite;
    -o-animation:      background 2s ease infinite;
    animation:         background 2s ease infinite;
}

/* Gradient animation, Webkit */
@-webkit-keyframes background {

    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }

}

/* Gradient animation, Mozilla */
@-moz-keyframes background {

    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }

}

/* Gradient animation, Opera */
@-o-keyframes background {

    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }

}

/* Gradient animation */
@keyframes background {

    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }

}

/* Headings & titles */
.heading {

    /*  Align heading to center */
    text-align: center;

    /* Set a good font */
    font-family: var(--poppins);

    /* Make it BIG! */
    font-size: 550%;

    /* Make sure it's not too light */
    opacity: 100%;

}

<!DOCTYPE html> <html leng = "en">

<!-- If you're seeing this, hello! Here, you can see the inner workings of my website. -->

<head>

    <title> Website! </title>

    <!-- All imports here -->

    <!-- Cool fonts from Google Fonts -->
    <link rel = "preconnect" 
            href = "https://fonts.gstatic.com">
    <link rel = "stylesheet"
            href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&family=Source+Sans+Pro:ital,wght@0,600;1,600&display=swap">

    <!-- CSS Stylesheet -->
    <link rel = "stylesheet" 
            type = "text/css" 
            href = "styles.css" 
            media = "screen"/>

    <!-- Encoding -->
    <meta charset  = "utf-8">

</head>

<body>

    <div class = "opener">

        <h1 class = "heading"> Site Title </h1>
        <text class = "text"> Some text goes here... </text>

    </div>

</body>

另外，有什么办法可以让包含动画的分隔线只覆盖一定数量吗？我只想显示第一个“x”高度的动画，其中 x 是用户的 window 高度，以及整个 window 宽度。这类似于 npm 的网站，其中 red/purple header 是特定大小并在滚动时消失。有谁知道如何做到这一点？如果您能提供帮助，将不胜感激！

Answer 1

您可以将 background-size 调整为大于 100% 以设置背景位置的动画。

喜欢background-size: 200% 100%;

:root {
  --yellow: 255, 225, 0;
  --grey: 23, 23, 23;
  --violet: 170, 0, 200;
  --red: 189, 0, 57;
}

.text {
  margin: 40px;
}

.opener {
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
  background-size: 200% 100%;
  background-color: var(--grey);
  color: white;
  animation: background 2s ease infinite;
}

@keyframes background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.heading {
    text-align: center;
    font-size: 550%;
}

<div class="opener">
  <h1 class="heading"> Site Title </h1>
  <text class="text"> Some text goes here... </text>
</div>

CSS渐变动画出现停顿

CSS gradient animation appears standstill

html

css

animation