CODEWITHSUNDEEP
cssanimationtransition
user339827
user339827

Reputation:

CSS transition going backwards/reverse

I'm wondering if is there any way to use the same CSS transition instance to both move it forward and then backwards/reverse. For example, lets say I have this transition:

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

And two runners for this transition. One does the fade in and the other does the fade out:

.fade-in {
    -webkit-animation: fade-transition .2s linear backwards;
}

.fade-out {
    -webkit-animation: fade-transition .2s linear forwards;
}

What I want to accomplish is to use the same transition to do both the fade in and the fade out but the way I'm doing it doesn't work.

Here is the example on JSBin.

Upvotes: 2

Views: 5036

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157424

Use percentage instead of from and to

@-webkit-keyframes fade-transition {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

You can iterate this number of times you want or just set it to infinite

Upvotes: 3

Related Questions