css-native

CSS Native Animation Principles

Implement all 12 Disney animation principles using CSS animations, transitions, and transforms.

1. Squash and Stretch @keyframes squash-stretch { 0%, 100% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(1.2) scaleY(0.8); } } .ball { animation: squash-stretch 0.3s ease-in-out; }

2. Anticipation @keyframes anticipate-jump { 0% { transform: translateY(0); } 20% { transform: translateY(10px) scaleY(0.9); } / wind up / 100% { transform: translateY(-100px); } }

3. Staging .hero { z-index: 10; filter: none; } .background { z-index: 1; filter: blur(2px); opacity: 0.7; }

4. Straight Ahead / Pose to Pose / Pose to pose - define keyframes explicitly / @keyframes walk-cycle { 0% { background-position: 0 0; } 25% { background-position: -100px 0; } 50% { background-position: -200px 0; } 75% { background-position: -300px 0; } 100% { background-position: -400px 0; } }

5. Follow Through and Overlapping Action .character { animation: move 0.5s ease-out; } .hair { animation: move 0.5s ease-out 0.05s; } / slight delay / .cape { animation: move 0.5s ease-out 0.1s; }

6. Slow In and Slow Out .element { transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1); } / Or use: ease-in-out, ease-in, ease-out /

7. Arc @keyframes arc-motion { 0% { transform: translate(0, 0); } 50% { transform: translate(100px, -80px); } 100% { transform: translate(200px, 0); } } / Use offset-path for true arcs / .element { offset-path: path('M0,100 Q100,0 200,100'); }

8. Secondary Action .button:hover { transform: scale(1.05); } .button:hover .icon { animation: wiggle 0.3s ease-in-out; }

9. Timing .fast { animation-duration: 0.15s; } .normal { animation-duration: 0.3s; } .slow { animation-duration: 0.6s; } .dramatic { animation-duration: 1.2s; }

10. Exaggeration @keyframes exaggerated-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-150px) scale(0.8, 1.3); } }

11. Solid Drawing .element { transform-style: preserve-3d; perspective: 1000px; } .face { transform: rotateY(20deg); }

12. Appeal .appealing { border-radius: 50%; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; } .appealing:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }

Timing Reference Action Duration Micro-interaction 100-200ms Button feedback 150-300ms Page transitions 300-500ms Complex animations 500-1000ms Key CSS Properties animation / @keyframes transition transform offset-path (motion paths) animation-timing-function animation-delay