CSS动画加载条问题求助：实现逐格变红循环效果

Hey there! Let's work through your loading bar problems step by step, starting with fixing your transition approach, then moving to the proper CSS Animation solution you need for a repeating cycle.

First: Fixing the Transition Approach Problems #

Let's tackle the immediate bugs in your transition code first:

1. Critical ID Typo
   You have a mismatch between your HTML and CSS for the first square: in your HTML, the first rectangle has id="premiers_carre", but in your CSS you wrote #premier_carre (missing the final "s"). That's exactly why the first square wouldn't turn red! Correct that selector, and it'll start working as expected.

2. Transitions Can't Handle Automatic Looping
   Transitions rely on explicit state changes (like :hover here) — once you hover over the container, all squares stay red until you move your mouse away. There's no built-in way to make transitions automatically toggle back to white and repeat the sequence. For that, CSS Animations are the right tool.

Here's the corrected transition code (just fixing the typo):

p { font-family: "Press start 2P"; }
#title { position: absolute; left : 530px; top : 280px ; }
.big_div { width: 1250px; height: 700px; display :flex; flex-direction : row; justify-content: center; align-items: center; }
.carre { background-color: white; border: 1px red solid; width: 80px; height: 10px; margin-right: 5px; }
/* Fixed the ID selector here */
#premiers_carre { transition-property: background-color; transition-delay: 0.1s; }
#deuxieme_carre { transition-property: background-color; transition-delay: 0.2s; }
#troisieme_carre { transition-property: background-color; transition-delay: 0.3s; }
#quatrieme_carre { transition-property: background-color; transition-delay: 0.4s; }
#cinquieme_carre { transition-property: background-color; transition-delay: 0.5s; }
/* Fixed the hover target selector here too */
.big_div:hover #premiers_carre { background-color: red; }
.big_div:hover #deuxieme_carre { background-color: red; }
.big_div:hover #troisieme_carre { background-color: red; }
.big_div:hover #quatrieme_carre { background-color: red; }
.big_div:hover #cinquieme_carre { background-color: red; }

Second: Implementing the Repeating Loading Bar with CSS Animation #

CSS Animations are made for this kind of timed, repeating sequence. Here's a clean, working implementation that matches your requirements:

Core Concept #

We'll create a keyframe animation that toggles a square's background from white to red and back, then assign this animation to each square with a staggered delay. This way, they turn red one after another, reset to white, and repeat infinitely.

Working Code Example #

Replace your CSS with this:

p { font-family: "Press start 2P"; }
#title { position: absolute; left: 530px; top: 280px; }
.big_div { 
  width: 1250px; 
  height: 700px; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
}
.carre { 
  background-color: white; 
  border: 1px red solid; 
  width: 80px; 
  height: 10px; 
  margin-right: 5px;
  /* Base animation properties */
  animation: fillAndReset 1s ease-in-out infinite;
}

/* Define the color change cycle */
@keyframes fillAndReset {
  0%, 40%, 100% {
    background-color: white; /* Stay white for most of the cycle */
  }
  50% {
    background-color: red; /* Flip to red at the midpoint */
  }
}

/* Stagger delays for each square to create the sequential effect */
#premiers_carre { animation-delay: 0s; }
#deuxieme_carre { animation-delay: 0.1s; }
#troisieme_carre { animation-delay: 0.2s; }
#quatrieme_carre { animation-delay: 0.3s; }
#cinquieme_carre { animation-delay: 0.4s; }

How This Works #

• @keyframes fillAndReset: This defines the color cycle — each square stays white until 40% of the animation duration, jumps to red at 50%, then fades back to white by the end of the 1-second cycle.
• animation: fillAndReset 1s ease-in-out infinite: Assigns the cycle to every square, sets a 1-second duration, uses smooth easing, and makes the animation repeat forever.
• animation-delay: Each square starts the cycle 0.1 seconds later than the last, creating the "依次变红" (one after another) effect. After the last square resets to white, the entire sequence automatically restarts.

Pro Tip for Cleaner Code #

If you want to avoid writing individual ID selectors for delays, you can use nth-child selectors instead:

.big_div .carre:nth-child(2) { animation-delay: 0.1s; }
.big_div .carre:nth-child(3) { animation-delay: 0.2s; }
.big_div .carre:nth-child(4) { animation-delay: 0.3s; }
.big_div .carre:nth-child(5) { animation-delay: 0.4s; }
.big_div .carre:nth-child(6) { animation-delay: 0.5s; }

This works because your squares are the 2nd to 6th children of .big_div (after the #title div).

内容的提问来源于stack exchange，提问作者nouse