4 Scroll-triggered Animations In Pure CSS/CSS3

This is a collection of four scroll-triggered animation effects implemented in pure CSS/CSS3. No JS required.

You can use these animations to add dynamic motion to any web elements as they appear in the viewport.

Animations Included:

• Animate From Middle: Elements emerge from the center with a dynamic transition
• Wave: Elements rotate and transform with a wave-like motion
• Slide: Elements slide into view from different directions
• Carpet: Elements unfold with a carpet-rolling effect

How to use it:

1. Prepare your elements by assigning specific class names for animations.

<!-- Slide Animations -->
<div class="sides"></div>
<div class="sides"></div>
<div class="sides"></div>
...
<!-- Carpet Animations -->
<div class="carpet"></div>
<div class="carpet"></div>
<div class="carpet"></div>
...
<!-- Wave Animations -->
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
...
<!-- Animate From Middle Animations -->
<div class="from-middle"></div>
<div class="from-middle"></div>
<div class="from-middle"></div>
...

2. Apply the necessary CSS rules for each scroll effect. These rules define the animation behavior, including timing and appearance.

/* For slide animations: */
@keyframes side-left {
  from {
    opacity: 0;
    transform: translateX(-500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes side-right {
  from {
    opacity: 0;
    transform: translateX(500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.sides:nth-of-type(2n) {
  animation: side-left ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
.sides:nth-of-type(2n + 1) {
  animation: side-right ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
/* For carpet animations: */
.carpet {
  animation: carpet ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes carpet {
  from {
    opacity: 0;
    transform: rotateX(90deg) translateZ(-300px) translateY(500px);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* For wave animations: */
.wave {
  animation: wave ease-in-out;
    animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes wave {
  from {
    opacity: 0;
    transform: rotateX(90deg) translateZ(300px) translateY(-500px);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* For from-middle animations: */
.from-middle {
  animation: from-middle ease-in-out;
    animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes from-middle {
  0% {
    opacity: 0;
    transform: translateY(-200px)
  }
  70% {
    opacity: 1;
    transform: translateX(200px) translateY(100px)
  }
  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}

3. You can adjust these CSS rules to further customize the animations. Modify the animation timing functions (e.g., ease-in-out), durations, delays, and keyframe values to achieve the desired visual effects. Changing the width, height, and background-color properties of the div elements will alter the appearance of the animated objects. Experiment with different values to match your website’s design.

div {
  width: 6rem;
  height: 3rem;
  background-color: black;
}
div:nth-of-type(2n + 3) {
  width: 12rem;
}
div:nth-of-type(8n + 3) {
  width: 3rem;
}
div:nth-of-type(11n) {
  width: 20rem;
}