Fade out Text 1, Fade in Text 2, Fade out Text 2, Fade in Text 3, Fade out Text 3, Fade in Text 1 [closed]

I am a self study student learning to code and I have hit a wall on my current project.
I am trying to make a Customer Quotes section on a page that sorts two sections of text through their own set of three different texts. For example, Quote 1 by Customer 1 fades out and fades in Quote 2 by Customer 2. Repeat for Quote 3 by Customer 3 until you start again with Quote 1 by Customer 1.

Each loop of fading in and out should take up to 10 seconds to complete its transtion.
The fading of the two sets of text should be synced.

Most likly I am experinceing a knowledge gap when it comes to Javascript to make this happen.
The project is limited to HTML, CSS, and Javascript.

The current CSS I have puts the quote in a box and postions the three rows of text within the box. The first row is on the top left. Second row is in the center. Third row is on the bottom right of the box.

My apologies for not post what code I do have. First time posting and I could not figure out Stack OverFlow’s posting rules for showing code.