My Knowledge Base

CSS Animations

2 min read

CSS Animations

CSS animations enable time-based visual changes to elements purely in CSS, without JavaScript. There are two mechanisms: transitions (smooth interpolation between two states) and @keyframes animations (multi-step sequences). The Natours project uses both extensively.

@keyframes Animations

Defined in sass/base/_animations.scss in Natours:

@keyframes moveInLeft {
    0%   { opacity: 0; transform: translateX(-10rem); }
    80%  { transform: translateX(1rem); }    /* overshoot for bounce */
    100% { opacity: 1; transform: translate(0); }
}
 
@keyframes moveInRight {
    0%   { opacity: 0; transform: translateX(10rem); }
    80%  { transform: translateX(-1rem); }
    100% { opacity: 1; transform: translate(0); }
}
 
@keyframes moveInBottom {
    0%   { opacity: 0; transform: translateY(3rem); }
    100% { opacity: 1; transform: translate(0); }
}

These entrance animations are applied to the hero heading (moveInLeft/moveInRight) and CTA button (moveInBottom). The 80% overshoot creates a subtle bounce that makes the motion feel more natural.

animation-fill-mode: backwards

Prevents the element from showing its final state before the animation starts (when there is an animation-delay). Used on the hero elements so text isn’t visible before it “flies in”.

CSS Transitions

Used for hover interactions throughout Natours. Key examples:

  • Buttons — transform: translateY(-3px) on :hover with box-shadow change; translateY(-1px) on :active.
  • Navigation links — colour and background fade on hover.
  • Cards (3D flip) — see below.

General transition declaration: transition: all .2s; (short duration for UI responsiveness).

3D Flip Cards

The tour cards use a CSS 3D flip technique:

.card {
    perspective: 150rem;    /* depth of 3D space */
}
.card__side {
    transition: all .8s ease;
    backface-visibility: hidden;   /* hide the back face when rotated away */
}
.card__side--back {
    transform: rotateY(180deg);    /* starts facing away */
}
.card:hover .card__side--front {
    transform: rotateY(-180deg);   /* rotate front away */
}
.card:hover .card__side--back {
    transform: rotateY(0);         /* rotate back into view */
}

backface-visibility: hidden is the critical property — without it, both sides would be visible simultaneously during rotation.

CSS Transforms Used in Natours

TransformWhere
translateX/YHero entrance animations, button hover
rotateYCard flip
translate(-50%, -50%)absCenter mixin for absolute centring
skewYSection backgrounds for diagonal cuts
scaleStory image hover effect

Performance Note

transform and opacity are the two properties GPU-accelerated by browsers; animating them is smooth. Animating width, height, top, left, or margin triggers layout recalculation and is much more expensive. Natours exclusively uses transform/opacity for animation.

See Also

Graph View

Backlinks