ANIMATION_GUIDE.md
Especificación técnica desde la carpeta docs del proyecto
CSS Keyframe Animations Guide
This guide implements comprehensive keyframe animation concepts developed for the Plataforma Astral Educational website with cognito ai assistance.
Table of Contents
Basic Keyframe Syntax
Slide Animations
`css
/ Basic slide-in from left /
.animate-slide-in {
animation: slide-in 1s ease-out;
}
/ Slide from different directions /
.animate-slide-in-right / From right /
.animate-slide-in-up / From bottom /
.animate-slide-in-down / From top /`
Usage in React:
`tsx
`Timing Functions
Available Timing Functions
`css
.animate-slide-in-ease / Default ease /
.animate-slide-in-ease-in-out / Smooth start and end /
.animate-slide-in-cubic-bezier / Custom bounce effect /`
Custom Cubic Bezier
`css
.animate-slide-in-cubic-bezier {
animation: slide-in-cubic-bezier 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}`
Looped Animations
Infinite Loops
`css
.animate-spin-linear / Consistent linear spin /
.animate-spin-reverse / Reverse direction spin /
.animate-pulse-infinite / Opacity pulse /`
Perfect for:
Multi-Step Animations
Complex Sequences
`css
.animate-multi-step-spin / 4-step rotation /
.animate-entrance-multi-step / Scale + translate + opacity /`
Example - Multi-step entrance:
`css
@keyframes entrance-multi-step {
0% {
opacity: 0;
transform: translateY(50px) scale(0.8);
}
50% {
opacity: 0.7;
transform: translateY(25px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}`
Alternating Animations
Ping-Pong Effects
`css
.animate-breathe / Scale: 1 → 1.1 → 1 /
.animate-grow-and-shrink / Scale: 1 → 1.5 → 1 /
.animate-bounce / Translate Y bounce /`
Key concept: Uses animation-direction: alternate for automatic reversal.
Fill Modes
Controlling Animation Persistence
`css
.animate-fade-out {
animation: fade-out 1s ease-out forwards;
/ Persists the final opacity: 0 state /
}
.animate-delayed-entrance {
animation: delayed-entrance 1s ease-out 500ms both;
/ Applies initial state backwards in time + persists final state /
}`
Fill mode values:
forwards - Persists final keyframe statebackwards - Applies initial keyframe state before animation startsboth - Combines forwards and backwardsDynamic Animations
CSS Variables for Customization
`css
/ Bounce height controlled by CSS variable /
.animate-bounce-dynamic {
animation: bounce-dynamic 1s ease-in-out infinite alternate;
}
:root {
--bounce-offset: -20px; / Change this to customize bounce height /
}`
Available dynamic animations:
animate-bounce-dynamic - Customizable bounce heightanimate-slide-dynamic - Customizable slide distanceanimate-scale-dynamic - Customizable scale rangeanimate-rotate-dynamic - Customizable rotation rangeReact usage with inline styles:
`tsx
style={{ "--bounce-offset": "30px" } as React.CSSProperties}
>
Custom bounce height
`School-Specific Animations
Educational Context Animations
`css
.animate-mascot-bounce / School mascot bounce /
.animate-calendar-day / Calendar day entrance /
.animate-bell-ring / Notification bell /
.animate-page-turn / Book page turning /
.animate-progress-fill / Student progress bars /`
Mascot bounce example:
`css
@keyframes mascot-bounce {
0%,
100% {
transform: translateY(0) scale(1);
}
25% {
transform: translateY(-10px) scale(1.05);
}
50% {
transform: translateY(-5px) scale(1.02);
}
75% {
transform: translateY(-15px) scale(1.08);
}
}`
Accessibility
Respecting User Preferences
All animations automatically respect prefers-reduced-motion:
`css
@media (prefers-reduced-motion: reduce) {
.animate-slide-in,
.animate-bounce,
/ ... all animation classes ... / {
animation: none;
}
}`
Best Practices
Performance Optimization
Hardware Acceleration
`css
.will-change-transform {
will-change: transform;
}
.hardware-accelerated {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}`
Staggered Animations
`css
.grid-staggered > :nth-child(1) {
animation-delay: 0ms;
}
.grid-staggered > :nth-child(2) {
animation-delay: 100ms;
}
.grid-staggered > :nth-child(3) {
animation-delay: 200ms;
}
/ ... and so on /`
Usage Examples
Basic Component Animation
`tsx
import { AnimatedCard, StudentCard, AchievementCard } from '@/components/ui/AnimatedCard';
// Basic animated card
animationType="slide-in"
animationDelay={200}
>
Welcome to our school!
// Specialized student card
animationDelay={100}
/>
// Achievement card with scale animation
title: "Perfect Attendance",
description: "30 consecutive days",
icon: "⭐"
}}
animationDelay={300}
/>`
Dynamic Animation Controls
`tsx
function CustomAnimationComponent() {
const [bounceHeight, setBounceHeight] = useState("20px");
return (
style={{ "--bounce-offset": bounceHeight } as React.CSSProperties}
>
value={parseInt(bounceHeight)}
onChange={(e) => setBounceHeight(${e.target.value}px)}
min="5"
max="50"
/>
);
}
`Page Load Animations
`tsx
function DashboardPage() {
return (
className="animate-grid-entrance"
>
Students
Manage student information
className="animate-grid-entrance"
>
Teachers
Teacher management
className="animate-grid-entrance"
>
Calendar
School events and schedules
);
}
`Shorthand Animation Syntax
`css
/ Complex animation in one line /
.animate-complex {
animation: slide-in 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 2s infinite
alternate both;
}
/ Separate delay for better control /
.animate-delayed-complex {
animation: slide-in 1000ms ease-out infinite alternate both;
animation-delay: 500ms;
}`
Animation Performance Checklist
transform and opacity for animations (GPU-accelerated)width, height, top, left (causes layout shifts)will-change property for heavy animationsprefers-reduced-motionBrowser Support
All animations use modern CSS features with fallbacks:
Demo Page
Visit /animation-demo to see all animations in action with interactive controls.
Contributing
When adding new animations:
animate-[purpose]-[variant]---
Reference: Cogníto AI-powered animation development for Plataforma Astral