What does the both keyword in animation: ... both do?

It applies the animation's fill-mode in both directions: the element holds its from state before the animation starts (so it doesn't flash unstyled) and holds its to state after it finishes (so it doesn't snap back to the from state once the animation completes).

Will the entrance animation replay every time the element scrolls into view?

No — a plain CSS animation runs once when the element is painted (e.g. on page load) and then stops, it doesn't restart on scroll. For a replay-on-scroll version, pair the animation with an IntersectionObserver that toggles a class, or use this toolbox's Scroll-Driven Animation generator which ties the effect to view() instead.

Why does Flip In need perspective() inside the transform?

rotateX needs a 3D viewing distance to look like a flip instead of a flat vertical squash — perspective(600px) inside the same transform value gives that element its own local perspective so the rotation reads as a genuine 3D tilt.

Can I stagger these entrance animations across a list?

Yes — keep the same @keyframes and animation-duration/easing from here, then add a different animation-delay per item (e.g. via :nth-child rules). This toolbox's Stagger Animation generator builds exactly that on top of the same effect keyframes.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS ENTRANCE ANIMATION GENERATOR

Browse a copy-ready set of entrance effects, replay live, and copy the CSS.

Duration: 600ms

Easing

.entrance {
  animation: entrance-fade-up 600ms ease-out both;
}

@keyframes entrance-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

How to use an entrance animation

1
Hit Replay all to preview every entrance effect at once.
2
Click a card to select that effect.
3
Adjust duration and easing with the controls.
4
Copy the CSS and HTML and apply the .entrance class to the element you want to animate in.

Questions

What does the both keyword in animation: ... both do?: It applies the animation's fill-mode in both directions: the element holds its from state before the animation starts (so it doesn't flash unstyled) and holds its to state after it finishes (so it doesn't snap back to the from state once the animation completes).
Will the entrance animation replay every time the element scrolls into view?: No — a plain CSS animation runs once when the element is painted (e.g. on page load) and then stops, it doesn't restart on scroll. For a replay-on-scroll version, pair the animation with an IntersectionObserver that toggles a class, or use this toolbox's Scroll-Driven Animation generator which ties the effect to view() instead.
Why does Flip In need perspective() inside the transform?: rotateX needs a 3D viewing distance to look like a flip instead of a flat vertical squash — perspective(600px) inside the same transform value gives that element its own local perspective so the rotation reads as a genuine 3D tilt.
Can I stagger these entrance animations across a list?: Yes — keep the same @keyframes and animation-duration/easing from here, then add a different animation-delay per item (e.g. via :nth-child rules). This toolbox's Stagger Animation generator builds exactly that on top of the same effect keyframes.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.