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

User · Answer

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.

User · Answer

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   lt a href   new  gt Click lt  a gt    lt div id  new  gt      Fade in       lt  div gt    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

User · Answer

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

User · Answer

CSS Keyframes support is pretty good these days    x000D   x000D   fade-in   x000D   opacity  1  x000D   animation-name  fadeInOpacity  x000D   animation-iteration-count  1  x000D   animation-timing-function  ease-in  x000D   animation-duration  2s  x000D    x000D   x000D   keyframes fadeInOpacity   x000D   0    x000D    opacity  0  x000D     x000D   100    x000D    opacity  1  x000D     x000D    x000D   lt h1 class  fade-in  gt Fade Me Down Scotty lt  h1 gt  x000D   x000D   x000D

[css] CSS transition fade in

Examples related to css

Examples related to css-transitions