This effect is based on my tutorial in OXYGEN4FUN.

It's a full CSS effect that works with the Animate On Scroll feature.

In this Design Set, I have added more features. Previously, it was only based on the viewport.
Now, not only the animations are triggered when they enter the viewport, but we can add some delays. It's useful if your reveal animations are displayed at the top of the page, so they don't run all at the same time:

REVEAL
ANIMATION
WITH DELAY

You can also change the speed of the animation and the colors of the block.
Just by editing the CSS variables, as explained here:

:root {
--SR1speed: 0.8s;
--SR1colstart:black;
--SR1colend:red;
--SR1delay:0s;
--SR1delayinc:250ms;
}

SR1speed: The speed of the animation
SR1colstart: color of the block when it starts moving
SR1colend: color of the block when it's full displayed
SR1delay: you don't need to touch that
SR1delayinc: It's for the following classes. It's just to change the increment for the delays

.delay1 { --SR3delay:calc(var(--SR3delayinc) * 1) }
.delay2 { --SR3delay:calc(var(--SR3delayinc) * 2) }
.delay3 { --SR3delay:calc(var(--SR3delayinc) * 3) }
...

Here are 3 examples you can download with this Design Set.

Most of the classes are the same. Except for the animation ( the SR1fadeIn, SR2fadeIn amd SR3fadeIn keyframes).

Note that it's better to copy the CSS in a stylesheet. In the Set, they are located in a Code Block because it's the only way to share them.

REVEAL
EFFECT
NUMBER
ONE
REVEAL EFFECT NUMBER 2
JUST A BASIC
REVEAL EFFECT
ON A NICE
BACKGROUND
CLICK HERE