FAQ Accordion Card with React JS

Hi Guys,

I have a question about CSS animation, I have been playing around with CSS animation to make the FAQ answers expand and contract slowly as you click, and it works for Chrome just fine but in firefox I see that it expands slowly as I want it but goes up immediately without using the animations I have used -webkit-, -moz-, and -ms- with the animations but it didnt change anything am I missing something.

Any help or advise about this or the code is highly appreciated.

The animations are marked by comments in the index.css file

Thank you in advance.