Summary  
This chapter covers using CSS keyframes to animate element properties like opacity and transform to create slide-and-fade entry effects.  

General domain of usage  
Web user interface design

Animated page headers are a powerful way to create **visual hierarchy** and draw users' attention to important sections of your site. By animating headers as they appear—using **movement**, **opacity**, or both—you can guide focus and add a polished, modern feel to your design.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkFuaW1hdGVkIFBhZ2UgSGVhZGVyIEV4YW1wbGU8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZXMuY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoZWFkZXIgY2xhc3M9ImFuaW1hdGVkLWhlYWRlciI+CiAgICAgIDxoMT5XZWxjb21lIHRvIFlvdXIgRGFzaGJvYXJkPC9oMT4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

LmFuaW1hdGVkLWhlYWRlciB7CiAgb3BhY2l0eTogMDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTQwcHgpOwogIGFuaW1hdGlvbjogc2xpZGVGYWRlSW4gMXMgZWFzZS1vdXQgZm9yd2FyZHM7Cn0KCkBrZXlmcmFtZXMgc2xpZGVGYWRlSW4gewogIGZyb20gewogICAgb3BhY2l0eTogMDsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNDBweCk7CiAgfQogIHRvIHsKICAgIG9wYWNpdHk6IDE7CiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7CiAgfQp9

The header starts out invisible and shifted upward by setting `opacity: 0` and `transform: translateY(-40px)`. The `slideFadeIn` keyframes then animate these properties, transitioning the header to fully visible and in place (`opacity: 1; transform: translateY(0);`). This creates a smooth slide and fade effect as soon as the page loads, immediately drawing your eye to the main heading.

Which CSS properties are being animated in the header example to achieve the slide and fade effect?

Bring your web pages to life with engaging motion and interactivity. Learn how to use CSS transitions, transforms, and keyframe animations to create smooth, modern effects that enhance the user experience.

Learn how to create smooth, natural motion using CSS transitions. Explore the core transition properties—duration, timing, and delay—and see how to apply them to interactive states like hover and focus. You'll also learn how to combine transitions with transforms for more fluid, engaging effects.

Unlock the full potential of CSS transforms and animations to make your designs dynamic and expressive. Learn how to move, scale, rotate, and skew elements, define custom keyframe animations, and control how they play.

Put your animation skills into action with real-world UI examples. Create interactive buttons, stylish hover effects, and animated headers while ensuring your motion is smooth, performant, and accessible to all users. Learn the best practices that make CSS animation both beautiful and responsible.

Animated Page Headers

Awesome!

Animated Page Headers