CSS Transitions and Animations

Static websites feel dead. Adding subtle motion brings them to life. CSS Transitions are the easiest way to start. They allow you to change property values smoothly (over a given duration). The classic example is a button that changes color on hover. Instead of instantly turning blue, you add transition: background-color 0.3s ease. For more complex sequences, you use CSS Animations. Animations let you define keyframes—multiple points of change. You define @keyframes slideIn { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } and then apply animation: slideIn 0.5s forwards. A common beginner mistake is trying to animate 'width' or 'height' properties, which cause layout reflows and are choppy. Stick to animating transform (translate, scale, rotate) and opacity. These are hardware-accelerated and smooth as butter.