How to apply animation to an element when displayed?

Question

I'm using a div to contain 3 sets of images. I have a back and a next button with which the user can navigate between the images.

My HTML:

<div class="imgs">
        <button>Back</button>
        <div class="conatiner">
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" /> 
            </div>
        </div>
        <button>Next</button>
    </div>

My CSS:

.imgs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container > div {
    display: none;
}

.container > .displayed{
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
}

.container > .displayed > img{
    width: 40px;
    height: 40px;
    border: 2px solid red;
}

The way how it works is that I have some JavaScript which ads the .displayed class to the displayed set of images. I want to achieve that when the class change happens one of the divs fades out and the other fades in so it will be more smooth. Is there a way to do this with CSS animations? Or how should I achieve this result?

Please, try to provide a fiddle, so we can understand better what you want... [mcve] — Calvin Nunes, Aug 26 '19 at 16:29
Possible duplicate of [CSS transition fade in](https://stackoverflow.com/questions/11660710/css-transition-fade-in) — computercarguy, Aug 26 '19 at 16:30

score 1 · Accepted Answer · answered Aug 26 '19 at 17:09

You should try using animation with @keyframes since that, will make an animation every time a element goes from hidden to displayed, as you as want.

Try something around this:

const images = document.querySelector(".container > .img-holder-1 ");

document.querySelector("#back").addEventListener('click', function() { images.classList.toggle('displayed'); });

.imgs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container > div {
    display: none;
}

.container > .displayed{
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
    opacity:0;
    animation:fade-in 1s forwards;
}

.container > .displayed > img{
    width: 40px;
    height: 40px;
    border: 2px solid red;
}

@keyframes fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity:1;
  }
}

<div class="imgs">
        <button id="back">Toggle Class</button>
        <div class="container">
            <div class="img-holder-1 displayed">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" /> 
            </div>
        </div>
    </div>

Click on "Toggle Class" to see the fade-in effect.

Thank you! I only have a one question left. How do I do the other set of images fade out? :) — Laczkó Örs, Aug 26 '19 at 17:19

How to apply animation to an element when displayed?

1 Answers1