CSS transition fade in

user_845248 0
Viewed 227529

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

css-transitions css
4 Answers

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_81080200
Related