Transition help

HTML-CSS
1

I have a transition from my JS using intersection obeservor however I want the opacity of the elements and to slide in from the left and can’t seem to get them to happen at the same time, it is either one or the other… here is my code.

.fade-in {

    opacity: 0;

    transition: opacity 1s ease-in;

}

.fade-in.appear {

    opacity: 1;

}

.from-left {

    transform: translateX(-50%);

}

.from-right {

    transform: translateX(50%);

}

.from-left,

.from-right {

    transition: transform opacity 1s ease-in;

}

.from-left.appear,

.from-right.appear {

    transform: translateX(0);

}

I’ve tried adding the opacity to the from classes nothing changed any advice is muchly appreciated!

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Instead of a snippet of code it would be better if you posted a link to your pen, GitHub page, etc so we can get a better view of what’s going on.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.