how do i make opacity transition after transform

Question

I'm trying to make something like fullpage.js. I have an active element and previous element. When I'm scrolling I have transform property on the both blocks, one like

.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}

And another is

.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}

Without transition they appear in a moment without any delay. But when I add transition they starting to blink because of the opacity. How can I make the block first to transform and then to lose it's opacity

Where are you using `transition`? Please, [edit] your question and provide a [mcve]. — Sebastian Simon, Sep 19 '17 at 18:30
Possible duplicate of [How to have multiple CSS transitions on an element?](https://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element) — Etheryte, Sep 19 '17 at 18:39

score 3 · Answer 1 · answered Sep 19 '17 at 18:37

You can simply define multiple transitions:

div {
  width: 200px;
  height: 200px;
  background: orange;
  opacity: 0.5;
  transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}

body:hover div {
  transform: rotate(45deg);
  opacity: 1;
}

<div></div>

how do i make opacity transition after transform

1 Answers1