Transactions and Animations

HTML & CSS
7 
<!DOCTYPE html>
<html>
  <head>
    <title>Jesse's Website</title>
    <link rel="stylesheet" type="text/css" href="flashcard.css">
  </head>
  <body>
    <h1>Ready, Set, POP QUIZ!</h1>
    <img style="float:right; margin-left:12px" src="https://jcaldwell.neocities.org/Images/IronMan.jpeg" height="270px">
          <div style="overflow:auto">
    <p>Pop Quiz Time! How do you like that? Hm? Not fun, are they? No, not really. All right, so for this pop quiz is going to be relatively simple. I am going to ask you questoins about random stuff, and you are gonig to try to answer them. Everyone should get these, believe it or not. Example would be like this: When did Iron Man die in Advengers? Answer: Endgame. See? Simple. Not too hard, and not too easy. After all, you need a 4.0 average in your report card, right?</p>
    <p>So here is how this is going to work. I will present at least eight cards. You are going to answer them without looking at the answer, and then, if you think you know it, you are going flip the card over. If you get it right, congrats! You will be going to Harvard next semester. Have fun, little ones.</p>
        </div>
    <img style="float:left; margin-left:12px; margin-right:12px" src="https://jcaldwell.neocities.org/Images/Smiley.jpg" height="270px">
          <div style="overflow:auto">
        </div>
    <p>Here are some rules for you:</p>

    <ul>
      <li>Take a guess without looking</li>
      <li>Only flip the card when you think you have the answer</li>
      <li>Get as many as you can correct.</li>
      <li>Have Fun! Pop Quiz's are meant for your defeat. Defeat it instead.</li>
    </ul>
    <style>
div {
width:300px;
height:200px;
transition: width 3s, height 2s;
}
div:hover {
width:600px;
height:100px;
}
</style>
    <div>
    <p>Question 1:What does HTML stand for?</p>
    <p>Answer: HyperText Markup Language</p>
    <p>Question 2: What is the average sleep time of a teenager?</p>
    <p>Answer: 8-10 hours</p>
    </div>

  </body>
</html>

https://jcaldwell.neocities.org/CSS%20Documents/FlashCards.html

Sorry for keeping you waiting. This is the website I am working on. I need to the animation or transaction to go on the paragraphs with the answer and questions, that way when they flip it over for the answer, they get it. Again, I need to know how to get the animation on the list, so they can flip it over for the answer. Is there a way for the question to be on one side, and the answer on the other? As you can see, it’s not exactly working. If it can be something like the website Quizlet, then that would be nice. I do not know JavaScript, just a bit of CSS, and some HTML