CSS transition fade in

Question

So I have used CSS transitions before but I have a unique case with this one. I am writing a custom plugin for creating modals. Essentially I create a div on the fly document.createElement('div') and append it to the body with a few classes. These classes define color and opacity. I would like to use strictly CSS to be able to fade in this div, but making the state change seems difficult b/c they require some user interaction.

Tried some advanced selectors hoping it would case a state change, tried media query hoping to change state...looking for any ideas and suggestions, I really want to keep this in CSS if possible

Not sure if i understand the question correct. Are you looking for a solution that doesn't require user interaction for the div to fade in? — Christofer Vilander
– Christofer Vilander, Commented Jul 26, 2012 at 7:01
Yes that is correct...I will programmatically create a div and want it to fade in is CSS — afreeland
– afreeland, Commented Jul 27, 2012 at 2:31

DigitalDesignDj · Accepted Answer · 2016-09-23 21:38:04Z

116

CSS Keyframes support is pretty good these days:

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

<h1 class="fade-in">Fade Me Down Scotty</h1>

answered Sep 23, 2016 at 21:38

DigitalDesignDj

1,9251 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DigitalDesignDj Over a year ago

You still want to use JS to add this class if you are not programatically adding an element, because you probably want to wait for document.ready, which pure CSS will not do.

Zaqx Over a year ago

This doesn't answer the question which is asking how do this with CSS transition.

Stuggi Over a year ago

Cheers mate, I've been trying 5 different ways to get this to work with JS and CSS transitions, and this is the first that works as it supposed to, every time, on every page by chucking it into the body class. :)

DigitalDesignDj Over a year ago

@Zaqx The transition is CSS, the trigger is up to you.

Zaqx Over a year ago

Not to be pedantic but just noticed (again apparently) that you are using a CSS animation not a transition. You might be interested to learn the distinction: cssanimation.rocks/transition-vs-animation

|

Alex Reynolds · Accepted Answer · 2012-07-26 00:33:51Z

16

I believe you could addClass to the element. But either way you'd have to use Jquery or reg JS

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}

answered Jul 26, 2012 at 0:33

Alex Reynolds

6,3524 gold badges30 silver badges43 bronze badges

Comments

yPhil · Accepted Answer · 2017-11-11 13:15:35Z

16

OK, first of all I'm not sure how it works when you create a div using (document.createElement('div')), so I might be wrong now, but wouldn't it be possible to use the :target pseudo class selector for this?

If you look at the code below, you can se I've used a link to target the div, but in your case it might be possible to target #new from the script instead and that way make the div fade in without user interaction, or am I thinking wrong?

Here's the code for my example:

HTML

<a href="#new">Click</a> 
<div id="new">
    Fade in ... 
</div>

CSS

#new {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    opacity: 0;    
}


#new:target {
    -webkit-transition: opacity 2.0s ease-in;
       -moz-transition: opacity 2.0s ease-in;
         -o-transition: opacity 2.0s ease-in;
                                  opacity: 1;
}

... and here's a jsFiddle

edited Nov 11, 2017 at 13:15

yPhil

8,4375 gold badges61 silver badges92 bronze badges

answered Jul 27, 2012 at 6:49

Christofer Vilander

18.2k6 gold badges33 silver badges27 bronze badges

3 Comments

afreeland Over a year ago

Appreciate the help, tried to manually fire this through various techniques and none seem to work. Ran across this article stackoverflow.com/questions/8101854/… and it appears they gave up as well =(

Christofer Vilander Over a year ago

OK. I'll get back to you if I think of something else that might solve it.

Bradmage Over a year ago

For anyone coming across this, here is a good reference on transitions css-tricks.com/almanac/properties/t/transition

WolfJames Mwali · Accepted Answer · 2020-07-17 06:51:19Z

3

I always prefer to use mixins for small CSS classes like fade in / out incase you want to use them in more than one class.

@mixin fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

and if you don't want to use mixins, you can create a normal class .fade-in.

answered Jul 17, 2020 at 6:51

WolfJames Mwali

311 bronze badge

Collectives™ on Stack Overflow

CSS transition fade in

4 Answers 4

6 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related