How to Add a CSS Fade-in Transition Animation to Text, Images, Scroll & Hover

In your HTML, create a div with the class fade-in-image. 2. Place your image inside this div. Your HTML will look like this: HTML

3. In your CSS, give your fade-in-image class the declaration animation: fadeIn 5s. You can adjust 5s to any span of time you want. CSS .fade-in-image { animation: fadeIn 5s; } This assigns an animation called fadeIn to our div. This doesn’t do anything yet because we still need to create the effect using keyframes. 4. In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect. CSS @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 5. It’s also recommended you repeat the code above using vendor prefixes — "-webkit", "-moz", "-o", and "-ms" — to ensure cross-browser compatibility. For example, "-webkit" is for Chrome, Safari, and almost all iOS browsers. This is shown in the final code below:

foobar

foobar

foobar

foobar

body, html, h1 { margin: 0; padding: 0; } h1 { color: white; font-size: 4rem; text-align: center; } section { height: 100vh; } .tag { } .tag { opacity: 0; transform: translate(0, 10vh); transition: all 1s; } .tag.visible { opacity: 1; transform: translate(0, 0); } .yellow { background-color: lightyellow; } .red { background-color: lightcoral; } .blue { background-color: lightblue; } .green { background-color: lightgreen; } $(document).on("scroll", function() { var pageTop = $(document).scrollTop(); var pageBottom = pageTop + $(window).height(); var tags = $(".tag"); for (var i = 0; i < tags.length; i++) { var tag = tags[i]; if ($(tag).position().top < pageBottom) { $(tag).addClass("visible"); } else { $(tag).removeClass("visible"); } } });