{"id":39719,"date":"2026-01-23T18:34:55","date_gmt":"2026-01-24T02:34:55","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39719"},"modified":"2026-01-23T18:34:56","modified_gmt":"2026-01-24T02:34:56","slug":"how-are-fade-in-animations-created-using-css-transitions-and-keyframes","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/how-are-fade-in-animations-created-using-css-transitions-and-keyframes\/","title":{"rendered":"How are fade-in animations created using CSS transitions and keyframes?"},"content":{"rendered":"\n

Subtle fade-ins make UIs feel smoother and more polished without stealing focus. You will see dev threads filled with questions like when to use transitions vs keyframes, how to trigger fades on scroll, and how to keep animations accessible and fast.<\/p>\n\n\n\n

Question:<\/h2>\n\n\n\n

How are fade-in animations created using CSS transitions and keyframes? I want a simple, reusable pattern for images, cards, and text that: <\/em><\/p>\n\n\n\n

    \n
  1. Fades in on load or when scrolled into view<\/em><\/li>\n\n\n\n
  2. Stays performant on mobile<\/em><\/li>\n\n\n\n
  3. Respects prefers-reduced-motion.<\/em><\/li>\n<\/ol>\n\n\n\n

    Sample CSS and a minimal JS snippet would help. Tips for handling images and placeholders would be great too.<\/em><\/p>\n\n\n\n

    Answer:<\/h2>\n\n\n\n

    You can implement fade-ins either with transitions or with keyframes. Use transitions when you toggle a property once, and keyframes when you need timeline control or multiple stages.<\/p>\n\n\n\n

    Approach 1: CSS transitions for simple state changes<\/h3>\n\n\n
    <style<\/span>><\/span>\n\/* Start hidden *\/<\/span>\n.fade-target<\/span> {\n\u00a0 opacity<\/span>: 0<\/span>;\n\u00a0 transform<\/span>: translateY<\/span>(8px<\/span>);\n\u00a0 transition<\/span>: opacity 300ms<\/span> ease-out, transform 300ms<\/span> ease-out;\n}\n\n\/* When ready to show *\/<\/span>\n.fade-target<\/span>.is-visible<\/span> {\n\u00a0 opacity<\/span>: 1<\/span>;\n\u00a0 transform<\/span>: translateY<\/span>(0<\/span>);\n}\n\n\/* Respect user preferences *\/<\/span>\n@media<\/span> (prefers-reduced-motion:<\/span> reduce) {\n\u00a0 .fade-target<\/span> {\n\u00a0 \u00a0 transition<\/span>: none;\n\u00a0 \u00a0 transform<\/span>: none;\n\u00a0 }\n}\n<\/span><\/style<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"fade-target\"<\/span> id<\/span>=\"card\"<\/span>><\/span>Content...<\/div<\/span>><\/span>\n\n<script<\/span>><\/span>\n\/\/ Example: reveal on page load<\/span>\nwindow<\/span>.addEventListener('load'<\/span>, () => {\n\u00a0 document<\/span>.getElementById('card'<\/span>).classList.add('is-visible'<\/span>);\n});\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Approach 2: CSS keyframes for more control<\/h3>\n\n\n
    <style<\/span>><\/span>\n@keyframes<\/span> fadeIn {\n\u00a0 from<\/span> { opacity<\/span>: 0<\/span>; transform<\/span>: translateY<\/span>(10px<\/span>); }\n\u00a0 to<\/span> { opacity<\/span>: 1<\/span>; transform<\/span>: translateY<\/span>(0<\/span>); }\n}\n\n.fade-in<\/span> {\n\u00a0 animation<\/span>: fadeIn 450ms<\/span> ease-out both;\n}\n\n\/* Motion preference *\/<\/span>\n@media<\/span> (prefers-reduced-motion:<\/span> reduce) {\n\u00a0 .fade-in<\/span> { animation<\/span>: none; }\n}\n<\/span><\/style<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"fade-in\"<\/span>><\/span>I will fade and lift in.<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Reveal on scroll using Intersection Observer<\/h3>\n\n\n
    <style<\/span>><\/span>\n.fade-on-scroll<\/span> { opacity<\/span>: 0<\/span>; transform<\/span>: translateY<\/span>(12px<\/span>); transition<\/span>: opacity 360ms<\/span>, transform 360ms<\/span>; }\n.fade-on-scroll<\/span>.is-inview<\/span> { opacity<\/span>: 1<\/span>; transform<\/span>: translateY<\/span>(0<\/span>); }\n<\/span><\/style<\/span>><\/span>\n\n<section<\/span> class<\/span>=\"fade-on-scroll\"<\/span>><\/span>Section A<\/section<\/span>><\/span>\n<section<\/span> class<\/span>=\"fade-on-scroll\"<\/span>><\/span>Section B<\/section<\/span>><\/span>\n\n<script<\/span>><\/span>\nconst<\/span> io = new<\/span> IntersectionObserver((entries<\/span>) =><\/span> {\n\u00a0 entries.forEach(e<\/span> =><\/span> {\n\u00a0 \u00a0 if<\/span> (e.isIntersecting) {\n\u00a0 \u00a0 \u00a0 e.target.classList.add('is-inview'<\/span>);\n\u00a0 \u00a0 \u00a0 io.unobserve(e.target);\n\u00a0 \u00a0 }\n\u00a0 });\n}, { rootMargin<\/span>: '0px 0px -10% 0px'<\/span>, threshold<\/span>: 0.1<\/span> });\n\ndocument<\/span>.querySelectorAll('.fade-on-scroll'<\/span>).forEach(el<\/span> =><\/span> io.observe(el));\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Performance and accessibility tips<\/h3>\n\n\n\n