39

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

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
afreeland
  • 3,889
  • 3
  • 31
  • 42

4 Answers4

97

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>
DigitalDesignDj
  • 1,725
  • 15
  • 16
  • 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. – DigitalDesignDj Sep 23 '16 at 21:41
  • 2
    This doesn't answer the question which is asking how do this with CSS transition. – Zaqx Aug 24 '19 at 02:55
  • 1
    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. :) – Stuggi Nov 01 '20 at 21:42
  • 1
    @Zaqx The transition _is_ CSS, the trigger is up to you. – DigitalDesignDj Nov 09 '20 at 19:59
  • @DigitalDesignDj Here is the quote from the question at the top of the page: “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.” – Zaqx Nov 09 '20 at 20:08
  • 1
    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: https://cssanimation.rocks/transition-vs-animation/ – Zaqx Nov 09 '20 at 20:12
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

yPhil
  • 8,049
  • 4
  • 57
  • 83
Christofer Vilander
  • 17,232
  • 6
  • 31
  • 26
  • Appreciate the help, tried to manually fire this through various techniques and none seem to work. Ran across this article http://stackoverflow.com/questions/8101854/activate-an-elements-active-css-pseudo-class-using-javascript and it appears they gave up as well =( – afreeland Jul 27 '12 at 17:57
  • OK. I'll get back to you if I think of something else that might solve it. – Christofer Vilander Jul 28 '12 at 08:42
  • For anyone coming across this, here is a good reference on transitions https://css-tricks.com/almanac/properties/t/transition/ – Bradmage Mar 30 '21 at 23:42
14

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;
}
Alex Reynolds
  • 6,264
  • 4
  • 26
  • 42
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.

WolfJames Mwali
  • 31
  • 1