Accordeon met animatie

Probleem

We willen dat het antwoord geanimeerd verschijnt, bijvoorbeeld van klein naar groot (scale in) of stuiterd zoals een bal.

Design

We beginnen met een keyframe te maken waarin we bepalen wat de animatie inhoudt:

@keyframes scaleIn {
 0% {
  opacity: 0;
  transform: scale(.5);
 }
 100% {
  opacity: 1;
  transform: scale(1);
 }
}

Vervolgens maken we een CSS klasse waarin de animatie toevoegen:

.scale-in {
    -webkit-animation-name: scaleIn;
    animation-name: scaleIn;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}

Tenslotte voegen we die klasse toe aan het html element dat willen animeren:

<section>
   <header id="Q3">
   <h2>
      <a href="#Q3">Wat is de straf?</a>
   </h2>
   </header>
      <div class="scale-in">
         <p>De man wou geen schuld bekennen, maar gaf aan dat hij het ... </p>
      </div>
</section>

Oplossing

See the Pen Accordeon met animatie by Jef Inghelbrecht (@jef) on CodePen.