{"id":39581,"date":"2023-12-14T12:55:05","date_gmt":"2023-12-14T17:55:05","guid":{"rendered":"https:\/\/mascolombia.com\/?p=39581"},"modified":"2025-01-03T15:36:29","modified_gmt":"2025-01-03T20:36:29","slug":"how-to-make-css-fade-in-transitions","status":"publish","type":"post","link":"https:\/\/mascolombia.com\/en\/how-to-make-css-fade-in-transitions\/","title":{"rendered":"5 Ways to make css fade in transitions to text &#038; images"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>In this article<\/h2><nav><ul><li class=\"\"><a href=\"#css-fade-transition\">CSS Fade Transition<\/a><\/li><li class=\"\"><a href=\"#why-add-fade-in-animation-to-your-website\">Why Add Fade-In Animation to Your Website?<\/a><\/li><li class=\"\"><a href=\"#css-transition-opacity\">CSS Transition Opacity<\/a><\/li><li class=\"\"><a href=\"#fade-in-image-transition-using-css\">Fade-In Image Transition Using CSS<\/a><\/li><li class=\"\"><a href=\"#fade-in-text-transition-using-css\">Fade-In Text Transition Using CSS<\/a><\/li><li class=\"\"><a href=\"#css-fade-in-transition-on-hover\">CSS Fade In Transition on Hover<\/a><\/li><li class=\"\"><a href=\"#css-fade-in-transition-on-scroll\">CSS Fade In Transition on Scroll<\/a><\/li><li class=\"\"><a href=\"#css-fade-background-transition\">CSS Fade Background Transition<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Animation adds a dynamic touch to websites, elevating user engagement when used judiciously. However, when done poorly, it can be overwhelming. An effective website is a crucial asset for achieving business goals, and amidst the digital noise, finding ways to stand out is key.<\/p>\n\n\n\n<p>One impactful animation style that suits various brands is the fade transition. This stylistic effect gracefully introduces or removes elements like text or images on your website.<\/p>\n\n\n\n<p>It\u2019s subtle, elegant, and, fortunately, easily implementable using Cascading Style Sheets (CSS), a language that enhances the visual appeal of your site, almost as if you were dealing with <a href=\"https:\/\/www.trumovo.com\/pages\/canvas-prints\" target=\"_blank\" rel=\"noopener\">Canvas Photo Prints<\/a>.<\/p>\n\n\n\n<p>You may read: <strong><a href=\"https:\/\/mascolombia.com\/en\/how-to-trademark-a-brand-name\/\">How to Trademark a Brand Name in 3 Simple Steps<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-fade-transition\">CSS Fade Transition<\/h2>\n\n\n\n<p>A CSS fade transition involves an element, be it an image, text, or background, gradually appearing or disappearing on the page. To achieve this effect, you\u2019ll utilize either the transition or animation property in CSS. Transition enables you to specify only initial and final states, while animation allows for intermediate points.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-add-fade-in-animation-to-your-website\">Why Add Fade-In Animation to Your Website?<\/h2>\n\n\n\n<p>Integrating CSS animation should never be an afterthought. Every design choice, including animation, must contribute to the user experience (UX). Animation, due to its inherent movement, demands early consideration in the design process.<\/p>\n\n\n\n<p>Website animation serves a purpose beyond aesthetics. It enhances the flow of your site, creating a more engaging User Interface (UI). Fade-in animation, among various animation types, offers flexibility for creating image fades, text fades, hover fades, scrolling fades, and background fades.<\/p>\n\n\n\n<p>Now, let\u2019s explore some practical implementations of CSS fade in transitions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/mascolombia.com\/wp-content\/uploads\/2023\/12\/how-to-make-css-fade-in-transitions-1-1024x683.jpg\" alt=\"\" class=\"wp-image-39593\" title=\"\" srcset=\"https:\/\/mascolombia.com\/wp-content\/uploads\/2023\/12\/how-to-make-css-fade-in-transitions-1-1024x683.jpg 1024w, https:\/\/mascolombia.com\/wp-content\/uploads\/2023\/12\/how-to-make-css-fade-in-transitions-1-300x200.jpg 300w, https:\/\/mascolombia.com\/wp-content\/uploads\/2023\/12\/how-to-make-css-fade-in-transitions-1-768x512.jpg 768w, https:\/\/mascolombia.com\/wp-content\/uploads\/2023\/12\/how-to-make-css-fade-in-transitions-1.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">  <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-transition-opacity\">CSS Transition Opacity<\/h2>\n\n\n\n<p>The CSS opacity property determines an element\u2019s transparency, ranging from 0 (completely transparent) to 1 (completely opaque). Combining opacity with the transition or animation property allows an element to smoothly transition from transparent to opaque, resulting in a fade-in animation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fade-in-image-transition-using-css\">Fade-In Image Transition Using CSS<\/h2>\n\n\n\n<p>To demonstrate opacity transitions, consider a fade-in image effect. Here\u2019s a step-by-step guide:<\/p>\n\n\n\n<p>1. In your HTML, create a div with the class \u201cfade-in-image\u201d and place your image inside it.<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;div class=\u201cfade-in-image\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;&lt;img src=\u201csource\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;\/div&gt;<\/p>\n\n\n\n<p>2. In your CSS, assign the \u201cfadeIn\u201d animation to the \u201cfade-in-image\u201d class.<\/p>\n\n\n\n<p class=\"has-text-align-center\">.fade-in-image { animation: fadeIn 5s; }<\/p>\n\n\n\n<p>3. Define the fadeIn keyframes, setting opacity from 0% to 100%.<\/p>\n\n\n\n<p class=\"has-text-align-center\">@keyframes fadeIn {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;0% { opacity: 0; }<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;100% { opacity: 1; }<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>4. Include vendor prefixes for cross-browser compatibility.<\/p>\n\n\n\n<p>This CSS code can be reused with other images by applying the \u201cfade-in-image\u201d class within an element containing an image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fade-in-text-transition-using-css\">Fade-In Text Transition Using CSS<\/h2>\n\n\n\n<p>Similarly, you can apply fade-in animation to text. Follow these steps:<\/p>\n\n\n\n<p>1. In your HTML, create a div with the class \u201cfade-in-text\u201d and insert your text inside it.<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;div class=\u201cfade-in-text\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;&lt;p&gt;Fade-in Text&lt;\/p&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;\/div&gt;<\/p>\n\n\n\n<p>2. In your CSS, assign the \u201cfadeIn\u201d animation to the \u201cfade-in-text\u201d class.<\/p>\n\n\n\n<p class=\"has-text-align-center\">.fade-in-text {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;font-family: Arial;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;font-size: 150px;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;animation: fadeIn 5s;<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>3. In your CSS, assign the \u201cfadeIn\u201d animation to the \u201cfade-in-text\u201d class.<\/p>\n\n\n\n<p class=\"has-text-align-center\">.fade-in-text {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;font-family: Arial;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;font-size: 150px;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;animation: fadeIn 5s;<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>4. Define the fadeIn keyframes, setting opacity from 0% to 100%.<\/p>\n\n\n\n<p class=\"has-text-align-center\">@keyframes fadeIn {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;0% { opacity: 0; }<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;100% { opacity: 1; }<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>5. Add vendor prefixes for cross-browser compatibility.<\/p>\n\n\n\n<p>This CSS code can be applied to any text element using the \u201cfade-in-text\u201d class.<\/p>\n\n\n\n<p>You may also read: <strong><a href=\"https:\/\/mascolombia.com\/en\/how-to-trademark-a-brand-name\/\">How to Trademark a Brand Name in 3 Simple Steps<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-fade-in-transition-on-hover\">CSS Fade In Transition on Hover<\/h2>\n\n\n\n<p>For a more interactive experience, trigger fade-in animation on mouse hover. This can be applied to both text and images. Here\u2019s an example for an image:<\/p>\n\n\n\n<p>1. In your HTML, create a div with the class \u201cfade-in-image\u201d and place your image inside it.<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;div class=\u201cfade-in-image\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;&lt;img src=\u201csource\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;\/div&gt;<\/p>\n\n\n\n<p>2. In your CSS, set the initial opacity of the \u201cfade-in-image\u201d class to 50%.<\/p>\n\n\n\n<p class=\"has-text-align-center\">.fade-in-image:hover {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;opacity: 100%;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;transition: opacity 1s;<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>This CSS code creates a fade-in effect when a user hovers over the image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-fade-in-transition-on-scroll\">CSS Fade In Transition on Scroll<\/h2>\n\n\n\n<p>Implementing fade-in animation on scroll involves JavaScript. The code registers scroll events and adjusts CSS accordingly. Here\u2019s a simplified example:<\/p>\n\n\n\n<p>1. In HTML, create multiple section elements with unique classes based on color.<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;section class=\u201cyellow\u201d&gt;&lt;h1&gt;foobar&lt;\/h1&gt;&lt;\/section&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;section class=\u201ctag red\u201d&gt;&lt;h1&gt;foobar&lt;\/h1&gt;&lt;\/section&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;section class=\u201ctag blue\u201d&gt;&lt;h1&gt;foobar&lt;\/h1&gt;&lt;\/section&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&lt;section class=\u201ctag green\u201d&gt;&lt;h1&gt;foobar&lt;\/h1&gt;&lt;\/section&gt;<\/p>\n\n\n\n<p>2. In CSS, set the height of each section to 100vh.<\/p>\n\n\n\n<p class=\"has-text-align-center\">section { height: 100vh; }<\/p>\n\n\n\n<p>3. Apply initial styles for elements with the class \u201ctag.\u201d<\/p>\n\n\n\n<p class=\"has-text-align-center\">.tag {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;opacity: 0;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;transform: translate(0, 10vh);<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;transition: all 1s;<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>4. Create styles for the \u201ctag.visible\u201d class.<\/p>\n\n\n\n<p class=\"has-text-align-center\">.tag.visible {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;opacity: 1;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;transform: translate(0, 0);<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>5. Add background colors to section elements.<\/p>\n\n\n\n<p>6. In JavaScript, detect scroll events and toggle the \u201cvisible\u201d class based on element positions.<\/p>\n\n\n\n<p>This JavaScript code uses jQuery for simplicity. It detects scroll events, checks if sections are in view, and toggles the \u201cvisible\u201d class accordingly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-fade-background-transition\">CSS Fade Background Transition<\/h2>\n\n\n\n<p>To create a fade background color transition, style the body element using the CSS animation property. Here\u2019s an example transitioning from yellow to green over six seconds:<\/p>\n\n\n\n<p>1. In CSS, assign initial background color, animation, and animation-fill-mode to the body.<\/p>\n\n\n\n<p class=\"has-text-align-center\">body {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;background: #FCE97F;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;animation: fadeBackground 6s;<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;animation-fill-mode: forwards;<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>2. Define the fadeBackground keyframes for initial and final background colors.<\/p>\n\n\n\n<p class=\"has-text-align-center\">@keyframes fadeBackground {<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;from { background-color: #FCE97F; }<\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;&nbsp;&nbsp;to { background-color: #2EB07B; }<\/p>\n\n\n\n<p class=\"has-text-align-center\">}<\/p>\n\n\n\n<p>This CSS code creates a gradual background color transition on the body element.<\/p>\n\n\n\n<p>Fade-in animation, when used purposefully, enhances storytelling and engagement on your website. Avoid unnecessary animation and focus on using fade-in effects to highlight specific elements, creating smoother transitions, and improving the overall user experience.<\/p>\n\n\n\n<p>Remember, thoughtful integration of animation contributes to a more compelling and effective website.<\/p>\n\n\n\n<p>Keep reading: <strong><a href=\"https:\/\/mascolombia.com\/en\/10-things-to-know-about-rocket-money\/\">10 Things to Know About Rocket Money<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS fade in transitions can help you to enhance website engagement. Follow these instructions and get creative with fade-in transitions.<\/p>\n","protected":false},"author":278,"featured_media":39590,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_focus_keyword":"css fade in","rank_math_title":"","rank_math_description":"CSS fade in transitions can help you to enhance website engagement. Follow these instructions and get creative with fade-in transitions.","rank_math_primary_category":"767","footnotes":""},"categories":[767],"tags":[776],"mc_distribution":[688],"class_list":["post-39581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-international","tag-article","mc_distribution-ninguna"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/posts\/39581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/users\/278"}],"replies":[{"embeddable":true,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/comments?post=39581"}],"version-history":[{"count":0,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/posts\/39581\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/media\/39590"}],"wp:attachment":[{"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/media?parent=39581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/categories?post=39581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/tags?post=39581"},{"taxonomy":"mc_distribution","embeddable":true,"href":"https:\/\/mascolombia.com\/en\/wp-json\/wp\/v2\/mc_distribution?post=39581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}