Can ease-in and ease-out have different speeds for the css transition timing function?

1k views Asked by At

I'm trying to have one element exit slowly and another one come in just as slow, but I want the first element to come in fast and the second one to exit fast too. Is this possible? Here's what I tried. This is for a deck.js slide set.

.slide.long.in {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 5000ms ease-in;
    transition: transform 500ms ease-out;
}
.slide.long.out {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-in;
    transition: transform 5000ms ease-out;
}
1

There are 1 answers

0
Adam D On

Deck.js has javascript functions that change the class on a section if it is previous, current, or next. Using Imgonzalves hint, I added the following classes and it seems to work.

> .slide.long.in.deck-current {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 2500ms ease-in;
}
> .slide.long.in.deck-next {
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
> .slide.long.in.deck-previous {
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
> .slide.long.out.deck-current {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-out;
}
> .slide.long.out.deck-next {
    -webkit-transition: -webkit-transform 500ms ease-out;
    transition: transform 500ms ease-out;
}
> .slide.long.out.deck-previous {
    -webkit-transition: -webkit-transform 500ms ease-out;
    transition: transform 5000ms ease-out;
}