CSS how to make an element fade in and then fade out?

I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:

Use the css defined in this link to toggle fadeIn and fadeOut classes for the required element: css-tricks.com/snippets/css/…

5 Answers 5

.elementToFadeInAndOut < opacity: 1; animation: fade 2s linear; >@keyframes fade < 0%,100% < opacity: 0 >50% < opacity: 1 >> 

.elementToFadeInAndOut < width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; >@-webkit-keyframes fadeinout < 0%,100% < opacity: 0; >50% < opacity: 1; >> @keyframes fadeinout < 0%,100% < opacity: 0; >50% < opacity: 1; >>

You can clean the code by doing this:

.elementToFadeInAndOut < width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; opacity: 0; >@-webkit-keyframes fadeinout < 50% < opacity: 1; >> @keyframes fadeinout < 50% < opacity: 1; >>

If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation : http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut < animation: fadeInOut 4s linear 1 forwards; >@keyframes fadeInOut < 0% < opacity: 0; >50% < opacity: 1; >100% < opacity: 0; >> 

By setting animation-fill-mode: forwards the animation will retain its last keyframe

By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)

Источник

Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect mentioned. An archived copy can be viewed on the Wayback Machine.

Illustration

4 Answers 4

Method 1:

If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren’t supported either, but this is exactly the kind of thing they were made for.

CSS

#test p < margin-top: 25px; font-size: 21px; text-align: center; -webkit-animation: fadein 2s; /* Safari, Chrome and Opera >12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; >@keyframes fadein < from < opacity: 0; >to < opacity: 1; >> /* Firefox < 16 */ @-moz-keyframes fadein < from < opacity: 0; >to < opacity: 1; >> /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein < from < opacity: 0; >to < opacity: 1; >> /* Internet Explorer */ @-ms-keyframes fadein < from < opacity: 0; >to < opacity: 1; >> /* Opera < 12.1 */ @-o-keyframes fadein < from < opacity: 0; >to < opacity: 1; >> 

Demo

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation

Method 2:

Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:

jQuery

CSS

Plain JavaScript (not in the demo)

document.getElementById("test").children[0].className += " load"; 

Demo

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions

Method 3:

Or, you can use the method that .Mail uses:

jQuery

$("#test p").delay(1000).animate(< opacity: 1 >, 700);​ 

CSS

Demo

Browser Support

jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/
jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/

This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.

CSS3 Animation is supported just fine by every modern browser around. Of course, IE is not a modern browser.

Yes, but what if you want/need to be backwards compatible to IE6? In that case I think that jQuery is the best option. But, the asker wants it in CSS so I posted it as an alternative.

Isn’t it best to set the initial opacity to 0 in javascript? That way if the user has javascript disabled the element is just there instead of never appearing.

@A.M.K I tried doing «fix» that just in the javascript but didn’t manage to, so in the end I created a separate css file with opacity: 1 !important; and put in a

Brilliant answer! How hard is to apply the animation via $(«#test p»).addClass(«load»);​ multiple times? Doing $(«#test p»).removeClass(‘load’).addClass(«load»);​ doesn’t do the job since the animation has already stopped. Can I trigger a restart from JavaScript?

You can use the onload=»» HTML attribute and use JavaScript to adjust the opacity style of your element.

Leave your CSS as you proposed. Edit your HTML code to:

This also works to fade-in the complete page when finished loading:

Great answer. Alternatively I guess you can set the onload directly on the element. Like

In response to @A.M.K’s question about how to do transitions without jQuery. A very simple example I threw together. If I had time to think this through some more, I might be able to eliminate the JavaScript code altogether:

 body window.onload = function() 
test
  

Another method is to use JS’s Web Animations API in combination with CSS.

async function moveToPosition(el, durationInMs) < return new Promise((resolve) =>< const animation = el.animate([< opacity: '0' >, < transform: `translateY($px)` >, ], < duration: durationInMs, easing: 'ease-in', iterations: 1, direction: 'normal', fill: 'forwards', delay: 0, endDelay: 0 >); animation.onfinish = () => resolve(); >); > async function fadeIn(el, durationInMs) < return new Promise((resolve) =>< const animation = el.animate([< opacity: '0' >, < opacity: '0.5', offset: 0.5 >, < opacity: '1', offset: 1 >], < duration: durationInMs, easing: 'linear', iterations: 1, direction: 'normal', fill: 'forwards', delay: 0, endDelay: 0 >); animation.onfinish = () => resolve(); >); > async function fadeInSections() < for (const section of document.getElementsByTagName('section')) < await fadeIn(section, 200); >> window.addEventListener('load', async() => < await moveToPosition(document.getElementById('headerContent'), 500); await fadeInSections(); await fadeIn(document.getElementsByTagName('footer')[0], 200); >); 

async function moveToPosition(el, durationInMs) < return new Promise((resolve) =>< const animation = el.animate([< opacity: '0' >, < transform: `translateY($px)` >, ], < duration: durationInMs, easing: 'ease-in', iterations: 1, direction: 'normal', fill: 'forwards', delay: 0, endDelay: 0 >); animation.onfinish = () => resolve(); >); > async function fadeIn(el, durationInMs) < return new Promise((resolve) =>< const animation = el.animate([< opacity: '0' >, < opacity: '0.5', offset: 0.5 >, < opacity: '1', offset: 1 >], < duration: durationInMs, easing: 'linear', iterations: 1, direction: 'normal', fill: 'forwards', delay: 0, endDelay: 0 >); animation.onfinish = () => resolve(); >); > async function fadeInSections() < for (const section of document.getElementsByTagName('section')) < await fadeIn(section, 200); >> window.addEventListener('load', async() => < await moveToPosition(document.getElementById('headerContent'), 500); await fadeInSections(); await fadeIn(document.getElementsByTagName('footer')[0], 200); >);

body, html < height: 100vh; >header < height: 20%; >.text-center < text-align: center; >.leading-none < line-height: 1; >.leading-3 < line-height: .75rem; >.leading-2 < line-height: .25rem; >.bg-black < background-color: rgba(0, 0, 0, 1); >.bg-gray-50 < background-color: rgba(249, 250, 251, 1); >.pt-12 < padding-top: 3rem; >.pt-2 < padding-top: 0.5rem; >.text-lightGray < color: lightGray; >.container < display: flex; /* or inline-flex */ justify-content: space-between; >.container section < padding: 0.5rem; >.opacity-0

          
 
Hello
 
Ipsum lipmsum emus tiris mism
 
 
 
 
ipsum 1
 
Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue
 
 
ipsum 2
 
Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue
 
 
ipsum 3
 
Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue
 
 
   

Источник

How to Make CSS Fade-in Animation for HTML Elements?

Fade is a CSS attribute that causes the HTML information to vanish. The CSS fade-in attribute is used to attract the user’s attention or to alert the user of certain information. CSS fade in effect differs from the blinking effect as the blinking property causes the material to continue the hide-and-seek process. However, if the page is not refreshed, the fade attribute that was previously visible after fading is not faded again. The transition attribute is often utilized when the webpage loads. In other words, when the webpage loads, it is initially blank.

Syntax

Parameters

Transform

In CSS fade-in an element can be transformed in both 2D and 3D, it applies to the orientation of the element.

Opacity

It is a property that gives an element translucence. As the value of opacity increases the transparency of the element decreases.

How To Use CSS Fade-in ?

Any website may effortlessly impress a site visitor by using subtle CSS fade in effects. One of the often used types of animation is the fade transition. We can use CSS fade-in to style your website such that text or pictures gradually appear or vanish.

On hover, you may also apply CSS fade-in effects. Thankfully, CSS makes it simple to apply fade-in motion.

CSS Fade-in Transition

A text, background, or image element may be made to gradually emerge on a web page using the CSS fade-in transition feature of CSS. We may use either the animation or the transition property to do this.

If we want to use CSS’s transition property, we have to define an initial and a final state without the requirement for any in-between points. An excellent illustration is allowing an element to shift from orange to blue.

However, you can only do this using the animation property if you want the element to switch from orange to blue to red. Additionally, while animations don’t require triggers like a hover, CSS transitions must.

Normally, animations begin as soon as the page loads, but you may postpone their start time with the animation-delay parameter.

How the Animation Property and @Keyframes Rule Create Fade-in Effect

Animation Property

Two keyframes define a CSS animation. In one, the opacity is set to 0, whereas in the other, it is set to 1. The animation seamlessly fades into the page when the animation type is set to easy. The body tag is given this attribute. This animation would start when the page loaded, giving the impression that it was fading in. The animation property allows you to adjust the CSS fade-in timing.

The CSS animation turned into a shortcut for the following properties:

The syntax of the CSS fade animation would be as follows:

Using the @Keyframes Rule

We progressively modify the styles of the chosen items by using the @keyframes rule. That is how we can make animation with CSS fade-in. Use the animation-property name’s value in the @keyframes rule to do this.

In this manner, we select the animation that will be applied to the progressively changing style. We apply styles using selectors like «from» and «to» within the @keyframes rule. Remember that the «from» and «to» selections correspond to 0% and 100% respectively.

As we apply styles with the «from» selector, those styles will progressively adapt to match those with the «to» selector. Keep in mind that the modification will occur throughout the time frame you select for the animation-duration attribute. The syntax for this method is as follows:

How To Add Fade-in Image Transition in CSS

We can create a CSS fade-in motion to photos using CSS. It is really one of the most common methods to use fade-in effects. In such circumstances, the picture will change from transparency to opacity. The opacity property in CSS fade allows you to describe the amount of transparency or opaqueness of an element.

The opacity property has values between 0 and 1, where 0 makes an element entirely transparent and 1 completely opaque. We can change an element between these two states in a predetermined amount of time when you combine this property with the transition or animation property.

Example

We write an example to illustrate CSS fade-in for images, using an image from the scaler website. The image fades into the screen on refresh or visiting the website initially.

HTML Code with inline CSS:

How To Add Fade-in Text Transition in CSS

CSS allows you to apply fade-in motion to text. In spite of the fact that you are now making a text fade in CSS, it functions similarly to how it does on pictures.

Example

Let’s say we now want to add a welcome message with a fade-in effect on the landing page of your website. To do this, first create the HTML for the message as follows: HTML Code with inline CSS :

How To Add Fade-in Transition on Hover

The hover state in CSS fade-in gives you a one-of-a-kind technique to i ncorporate interactive fade-in animation. It may be used with a variety of components, including text, buttons, and pictures. We add hover property and create transitions.

Example

We add the hover property on image element, here’s an example for the CSS fade-in transition on hover: HTML Code with inline CSS:

How To Create a Fade-in Background Animation

Additionally, CSS fade-in enables you to create web pages with background colours that gradually fade in. You must style the body element with the CSS fade-in animation attribute in order to do this.

Example

Let’s say they ask you to change the backdrop colour from blue to black in five seconds and to make sure the change is repeated. You may do that with CSS by using the methods listed below: HTML Code with inline CSS:

Conclusion

• The transition property fading and displaying HTML data is covered in this CSS fade in transition article.
• We cover How to Use Fade in CSS and How to Create CSS fade-in Transition. After that, we go over the two ways that the Animation Property and @Keyframes Rule create the fade-in effect and how they work together to create them.
• We also learn how to add a CSS fade-in image transition in CSS, a CSS fade-in text transition in CSS, a transition on hover, and a background animation using an example of HTML code and inline CSS.

Источник