How to create a CSS-only animated timeline?

To create a CSS-only animation timeline, you need to first build a semantic HTML structure, and each event is represented by a div containing dots and content; 2. Use Flexbox layout and pseudo-elements to create a centered vertical line, and use @keyframes to define fadeInUp animation to achieve bottom-to-top display; 3. Use animation-delay to achieve cascading entry effect, and optionally add alternating content alignment on left and right; 4. Optional enhancements include using drawLine animation to simulate the line drawing process, hover effect and responsive adaptation; 5. Key points include using opacity and transform to ensure animation performance, adopt semantic tags and test mobile layout. Ultimately implement a smooth, accessible and easy to customize timeline without JavaScript.

Creating a CSS-only animated timeline is a great way to showcase events, milestones, or steps in a visually engaging way—without needing JavaScript. Here's how you can build one using just HTML and CSS, with smooth animations and a clean layout.

1. Structure the HTML Markup

Start with a semantic and simple HTML structure. Each timeline event goes into a list item, making it easy to style and animate.

 <div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event One</h3>
      <p>January 2023</p>
      <p>This is the first milestone in the timeline.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event Two</h3>
      <p>March 2023</p>
      <p>Second key event with more details.</p>
    </div>
  </div>

  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h3>Event Three</h3>
      <p>June 2023</p>
      <p>Final milestone in this example timeline.</p>
    </div>
  </div>
</div>

2. Style the Timeline with CSS

Now apply styles to create the vertical line, position the dots, and align the content. We'll use Flexbox for layout and @keyframes for animation.

 .timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto;
  padding: 20px 0;
}

/* Vertical line down the center */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #007bff;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s forwards;
}

/* Offset animation delay for each item */
.timeline-item:nth-child(1) { animation-delay: 0.3s; }
.timeline-item:nth-child(2) { animation-delay: 0.6s; }
.timeline-item:nth-child(3) { animation-delay: 0.9s; }

/* Timeline dot */
.timeline-dot {
  width: 20px;
  height: 20px;
  background: #007bff;
  border: 4px solid #ffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #007bff40;
  margin: 0 20px;
  align-self: center;
}

/* Content box */
.timeline-content {
  flex: 1;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 350px;
}

.timeline-content h3 {
  margin: 0 0 10px;
  color: #333;
}

.timeline-content p {
  margin: 5px 0;
  color: #666;
  font-size: 0.9em;
}

/* For alternating side (optional) */
.timeline-item:nth-child(odd) .timeline-content {
  align-self: flex-end;
}

.timeline-item:nth-child(even) .timeline-content {
  align-self: flex-start;
}

/* Animation keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

3. Optional Enhancements

You can make the timeline more dynamic with a few tweaks:

• Animate the line drawing : Use a pseudo-element with height animation.
• Add hover effects : Scale the dot or lift the card on hover.
• Responsive layout : On small screens, stack everything vertically.

Example: Animate the line being drawn from top to bottom:

 .timeline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: #007bff;
  height: 0;
  animation: drawLine 1s ease-out forwards;
}

@keyframes drawLine {
  to {
    height: 100%;
  }
}

4. Key Points to Remember

• Use opacity and transform for smooth, performant animations.
• Stagger animation-delay to create a cascading effect.
• Keep the structure semantic— <ol></ol> or <ul></ul> can also be used instead of div s.
• Test on mobile: consider switching to a single-column layout using media queries.

Basically, a CSS-only animated timeline comes down to combining layout techniques (Flexbox, positioning), pseudo-elements for the line, and subtle animations to bring it to life. No JavaScript needed, and it's fast, accessible, and easy to customize.

The above is the detailed content of How to create a CSS-only animated timeline?. For more information, please follow other related articles on the PHP Chinese website!