{"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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">To demonstrate opacity transitions, consider a fade-in image effect. Here\u2019s a step-by-step guide:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\">&lt;div class=\u201cfade-in-image\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&lt;img src=\u201csource\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&lt;\/div&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\">.fade-in-image { animation: fadeIn 5s; }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Define the fadeIn keyframes, setting opacity from 0% to 100%.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">@keyframes fadeIn {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;0% { opacity: 0; }<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;100% { opacity: 1; }<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Include vendor prefixes for cross-browser compatibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Similarly, you can apply fade-in animation to text. Follow these steps:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\">&lt;div class=\u201cfade-in-text\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&lt;p&gt;Fade-in Text&lt;\/p&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&lt;\/div&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\">.fade-in-text {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;font-family: Arial;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;font-size: 150px;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;animation: fadeIn 5s;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\">.fade-in-text {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;font-family: Arial;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;font-size: 150px;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;animation: fadeIn 5s;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Define the fadeIn keyframes, setting opacity from 0% to 100%.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">@keyframes fadeIn {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;0% { opacity: 0; }<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;100% { opacity: 1; }<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Add vendor prefixes for cross-browser compatibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This CSS code can be applied to any text element using the \u201cfade-in-text\u201d class.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 wp-block-paragraph\">&lt;div class=\u201cfade-in-image\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&lt;img src=\u201csource\u201d&gt;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&lt;\/div&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 wp-block-paragraph\">.fade-in-image:hover {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;opacity: 100%;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;transition: opacity 1s;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">1. In HTML, create multiple section elements with unique classes based on color.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&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 wp-block-paragraph\">&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 wp-block-paragraph\">&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 wp-block-paragraph\">&lt;section class=\u201ctag green\u201d&gt;&lt;h1&gt;foobar&lt;\/h1&gt;&lt;\/section&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. In CSS, set the height of each section to 100vh.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">section { height: 100vh; }<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Apply initial styles for elements with the class \u201ctag.\u201d<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">.tag {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;opacity: 0;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;transform: translate(0, 10vh);<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;transition: all 1s;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Create styles for the \u201ctag.visible\u201d class.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">.tag.visible {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;opacity: 1;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;transform: translate(0, 0);<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Add background colors to section elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. In JavaScript, detect scroll events and toggle the \u201cvisible\u201d class based on element positions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 wp-block-paragraph\">body {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;background: #FCE97F;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;animation: fadeBackground 6s;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;animation-fill-mode: forwards;<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Define the fadeBackground keyframes for initial and final background colors.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">@keyframes fadeBackground {<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;from { background-color: #FCE97F; }<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">&nbsp;&nbsp;&nbsp;to { background-color: #2EB07B; }<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This CSS code creates a gradual background color transition on the body element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Remember, thoughtful integration of animation contributes to a more compelling and effective website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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}]}}