CSS Animations

Overview

The portfolio uses CSS animations to create engaging, smooth interactions without any JavaScript. Animations are applied to:

Navigation links - Hover underline effect
Skills icons - Fade-in on page load
Icon hover states - Scale and brightness effects
Focus states - Accessibility indicators

All animations use CSS keyframes and transitions, ensuring smooth 60fps performance.

When hovering over navigation links, a blue underline animates in from left to right.

The Effect

styles.css:96-104

.nav-link:hover::after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: #003ba8;
    display: block;
    animation-name: ampliar-anchura;
    animation-duration: 0.5s;
}

The Keyframes

styles.css:106-114

@keyframes ampliar-anchura {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

How It Works
Visual Demo

A ::after pseudo-element is created on hover
It starts at width: 0%
Animates to width: 100% over 0.5 seconds
Creates a 3px tall blue bar
When hover ends, the element disappears (no reverse animation)

Initial state (no hover):
┌──────────────┐
│  Quien Soy   │
└──────────────┘

Hover state (animating):
┌──────────────┐
│  Quien Soy   │
└████──────────┘  ← Growing underline

Hover complete:
┌──────────────┐
│  Quien Soy   │
└██████████████┘  ← Full width

The animation name “ampliar-anchura” means “expand width” in Spanish.

Skills Icons Fade Animation

The technology icons in the Habilidades section fade in and slide up when the page loads.

Icon Styling

styles.css:192-203

.img {
    width: 50px;
    height: 50px;
    transition: 0.3s ease-out;
    box-sizing: content-box;
    animation: fadeSlide 0.8s both;
    scale: 1;
}

The animation-fill-mode: both (the “both” keyword) keeps the initial opacity: 0 until animation starts and maintains the final state after completion.

FadeSlide Keyframes

styles.css:213-223

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Animation breakdown:

Initial state: Icons are invisible (opacity: 0) and 20px below their final position
Duration: 0.8 seconds
End state: Icons are fully visible (opacity: 1) at their natural position
Effect: Icons smoothly fade in while sliding upward

Staggered Animation Delays

Each icon animates with a different delay, creating a wave effect:

styles.css:225-251

.img:nth-child(1) { animation-delay: 0.2s; }  /* HTML */
.img:nth-child(2) { animation-delay: 0.3s; }  /* CSS */
.img:nth-child(3) { animation-delay: 0.4s; }  /* JavaScript */
.img:nth-child(4) { animation-delay: 0.5s; }  /* Tailwind */
.img:nth-child(5) { animation-delay: 0.4s; }  /* SQL Server */
.img:nth-child(6) { animation-delay: 0.3s; }  /* MongoDB */
.img:nth-child(7) { animation-delay: 0.2s; }  /* MySQL */

Desktop Pattern
Mobile Pattern

The delays create a center-out wave pattern:

0.2s → 0.3s → 0.4s → 0.5s → 0.4s → 0.3s → 0.2s
HTML   CSS    JS     TW     SQL    Mongo  MySQL

  ░     ░░    ░░░    ████   ░░░    ░░     ░
       ⬅ Earlier          Later ➡

The middle icon (Tailwind) animates last, creating symmetry.

On mobile (≤800px), delays increase linearly:

styles.css:253-281

@media (max-width: 800px) {
    .img:nth-child(1) { animation-delay: 0.2s; }
    .img:nth-child(2) { animation-delay: 0.3s; }
    .img:nth-child(3) { animation-delay: 0.4s; }
    .img:nth-child(4) { animation-delay: 0.5s; }
    .img:nth-child(5) { animation-delay: 0.6s; }
    .img:nth-child(6) { animation-delay: 0.7s; }
    .img:nth-child(7) { animation-delay: 0.8s; }
}

Creates a left-to-right cascade when icons wrap to multiple rows.

If you add or remove skill icons, update both the desktop (lines 225-251) and mobile (lines 254-280) animation delays.

Icon Hover Effects

When hovering over skill icons, they scale up and brighten:

styles.css:205-211

.img:hover {
    scale: 1.15;
    filter: brightness(1.5) contrast(1.1);
}

Effects breakdown:

scale: 1.15 - Icon grows to 115% size (57.5px × 57.5px)
brightness(1.5) - Colors become 50% brighter
contrast(1.1) - Slightly increased contrast makes colors pop

The scale property is a shorthand for transform: scale(1.15) and has better performance.

Transition Timing

styles.css:195

transition: 0.3s ease-out;

The hover effect transitions over 0.3 seconds with an ease-out timing function (fast start, slow end).

Normal State
Hover State

┌────────┐
│        │
│  [🔷]  │  50×50px, normal brightness
│        │
└────────┘

┌─────────┐
│         │
│  [💠]  │  57.5×57.5px, brighter, higher contrast
│         │
└─────────┘

Focus States (Accessibility)

Keyboard navigation triggers focus styles with a blue outline:

styles.css:88-93

.nav-link a:focus {
    outline: 4px solid #003ba8;
    border-radius: 8px;
    outline-offset: 3px;
    transition-delay: 125ms;
}

Features:

4px solid outline in brand blue (#003ba8)
8px border radius for softer corners
3px offset creates space between text and outline
125ms delay prevents flashing when rapidly tabbing

This ensures the portfolio is fully accessible via keyboard (Tab key navigation).

Profile Image Effect

The profile photo has a glowing drop shadow:

styles.css:141

filter: drop-shadow(1px 1px 30px #0094a8);

Parameters:

1px horizontal offset
1px vertical offset
30px blur radius (creates glow effect)
#0094a8 light blue color

Unlike box-shadow, drop-shadow follows the alpha channel of PNG images, creating a true glow around the subject rather than a rectangular shadow.

Performance Considerations

GPU-Accelerated Properties

These animations use GPU-accelerated properties for smooth performance: ✅ Animating (fast):

transform (translateY, scale)
opacity
filter

❌ Avoid animating (slow):

width, height
margin, padding
top, left

The navigation underline animation uses width, which can cause minor performance issues on very low-end devices. Consider using transform: scaleX() instead:

.nav-link::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-out;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

Animation Performance Tips

Reduce motion for accessibility

Some users prefer reduced motion. Add this media query:

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

Will-change property

For frequently animated elements, hint to the browser:

.img {
    will-change: transform, filter;
}

But don’t overuse it - only for elements that animate often.

Customization Examples

Slower Fade Animation

.img {
    animation: fadeSlide 1.5s both;  /* Was 0.8s */
}

Different Hover Scale

.img:hover {
    scale: 1.3;  /* Bigger growth */
}

Make the underline animate out when hover ends:

.nav-link::after {
    content: '';
    width: 0;
    height: 3px;
    background-color: #003ba8;
    display: block;
    transition: width 0.3s ease-out;
}

.nav-link:hover::after {
    width: 100%;
}

Add Bounce Effect

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    
    60% {
        transform: translateY(-5px);  /* Slight bounce */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Next Steps

Responsive Design

Learn how animations adapt to mobile

CSS Architecture

Understand the overall CSS structure

Navigation

Explore the navigation HTML and CSS

Customization

Customize animation colors and timing

Getting Started

Structure

Styling

Customization

Overview

Navigation Hover Animation

The Effect

The Keyframes

Skills Icons Fade Animation

Icon Styling

FadeSlide Keyframes

Staggered Animation Delays

Icon Hover Effects

Transition Timing

Focus States (Accessibility)

Profile Image Effect

Performance Considerations

GPU-Accelerated Properties

Animation Performance Tips

Customization Examples

Slower Fade Animation

Different Hover Scale

Reverse Navigation Animation

Add Bounce Effect

Next Steps

Responsive Design

CSS Architecture

Navigation

Customization

Build docs developers (and LLMs) love

Getting Started

Structure

Styling

Customization

Documentation Index

​Overview

​Navigation Hover Animation

​The Effect

​The Keyframes

​Skills Icons Fade Animation

​Icon Styling

​FadeSlide Keyframes

​Staggered Animation Delays

​Icon Hover Effects

​Transition Timing

​Focus States (Accessibility)

​Profile Image Effect

​Performance Considerations

​GPU-Accelerated Properties

​Animation Performance Tips

​Customization Examples

​Slower Fade Animation

​Different Hover Scale

​Reverse Navigation Animation

​Add Bounce Effect

​Next Steps

Responsive Design

CSS Architecture

Navigation

Customization

Build docs developers (and LLMs) love

Overview

Navigation Hover Animation

The Effect

The Keyframes

Skills Icons Fade Animation

Icon Styling

FadeSlide Keyframes

Staggered Animation Delays

Icon Hover Effects

Transition Timing

Focus States (Accessibility)

Profile Image Effect

Performance Considerations

GPU-Accelerated Properties

Animation Performance Tips

Customization Examples

Slower Fade Animation

Different Hover Scale

Reverse Navigation Animation

Add Bounce Effect

Next Steps