diff --git a/package-lock.json b/package-lock.json
index df2e641..5f2f96d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-icons": "^4.4.0",
+        "react-transition-group": "^4.4.2",
         "reactstrap": "^9.1.1",
         "sass": "^1.52.2"
       },
@@ -19,6 +20,7 @@
         "@types/node": "17.0.40",
         "@types/react": "18.0.11",
         "@types/react-dom": "18.0.5",
+        "@types/react-transition-group": "^4.4.4",
         "eslint": "8.17.0",
         "eslint-config-next": "12.1.6",
         "typescript": "4.7.3"
@@ -370,6 +372,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3381,6 +3392,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
diff --git a/package.json b/package.json
index 86f7d8b..5583928 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-icons": "^4.4.0",
+    "react-transition-group": "^4.4.2",
     "reactstrap": "^9.1.1",
     "sass": "^1.52.2"
   },
@@ -20,6 +21,7 @@
     "@types/node": "17.0.40",
     "@types/react": "18.0.11",
     "@types/react-dom": "18.0.5",
+    "@types/react-transition-group": "^4.4.4",
     "eslint": "8.17.0",
     "eslint-config-next": "12.1.6",
     "typescript": "4.7.3"
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 10e009a..443055f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import '../styles/globals.scss';
+import '../styles/transitions.scss';
 import type { AppProps } from 'next/app';
 import Footer from './components/Footer';
 import Header from './components/Header';
diff --git a/pages/info.tsx b/pages/info.tsx
index f438c77..ce5aa79 100644
--- a/pages/info.tsx
+++ b/pages/info.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Info.module.scss';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
+import { CSSTransition } from 'react-transition-group';
 
 interface InfoToggles {
   shop: boolean;
@@ -42,19 +43,27 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.shop && (
-          <>
-            <p>
-              Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
-              baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
-              käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista
-              esim. mahdollisia kirjaostoksia varten.
-            </p>
-            <a href='https://https//livonsaarenosuuskauppa.fi/'>
-              Kaupan kotisivut
-            </a>
-          </>
-        )}
+        <CSSTransition
+          in={infoToggles.shop}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.shop ? (
+            <div>
+              <p>
+                Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
+                baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
+                käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista
+                esim. mahdollisia kirjaostoksia varten.
+              </p>
+              <a href='https://https//livonsaarenosuuskauppa.fi/'>
+                Kaupan kotisivut
+              </a>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -68,18 +77,26 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.bus && (
-          <>
-            <p>
-              Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle
-              17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali
-              alueelle.
-            </p>
-            <a href='https://https//www.foli.fi/fi'>
-              Paikallisliikenteen bussiaikataulut
-            </a>
-          </>
-        )}
+        <CSSTransition
+          in={infoToggles.bus}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.bus ? (
+            <div>
+              <p>
+                Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle
+                17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali
+                alueelle.
+              </p>
+              <a href='https://https//www.foli.fi/fi'>
+                Paikallisliikenteen bussiaikataulut
+              </a>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -93,17 +110,27 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.accom && (
-          <>
-            <p>
-              Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja
-              (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela.
-            </p>
-            <a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
-            <a href='https://www.livonsaarencaravan.fi/'>Livonsaari Caravan</a>
-            <a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
-          </>
-        )}
+        <CSSTransition
+          in={infoToggles.accom}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.accom ? (
+            <div>
+              <p>
+                Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja
+                (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela.
+              </p>
+              <a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
+              <a href='https://www.livonsaarencaravan.fi/'>
+                Livonsaari Caravan
+              </a>
+              <a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -117,18 +144,26 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.ferry && (
-          <>
-            <p>
-              Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
-              (huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa
-              julkista tieverkostoa eli maksuton.)
-            </p>
-            <a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'>
-              Aikataulut Palvaan ja Velkuanmaahan
-            </a>
-          </>
-        )}
+        <CSSTransition
+          in={infoToggles.ferry}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.ferry ? (
+            <div>
+              <p>
+                Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
+                (huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa
+                julkista tieverkostoa eli maksuton.)
+              </p>
+              <a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'>
+                Aikataulut Palvaan ja Velkuanmaahan
+              </a>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -142,13 +177,21 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.fb && (
-          <>
-            <a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
-              Tapahtuman facebook-sivut
-            </a>
-          </>
-        )}
+        <CSSTransition
+          in={infoToggles.fb}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.fb ? (
+            <div>
+              <a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
+                Tapahtuman facebook-sivut
+              </a>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
     </section>
diff --git a/pages/performers.tsx b/pages/performers.tsx
index ad1e8a7..3f6f369 100644
--- a/pages/performers.tsx
+++ b/pages/performers.tsx
@@ -5,6 +5,7 @@ import shared from '../styles/Shared.module.scss';
 import Performer from '../types/Performer';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 import PerformersData from '../data/performers/2022';
+import { CSSTransition } from 'react-transition-group';
 
 interface PerformerCard extends Performer {
   id: number;
@@ -65,15 +66,21 @@ const Performers = () => {
                 )}
               </button>
             </div>
-            {p.showDesc && (
-              <>
-                {p.paragraphs.map((parag, index) => (
-                  <p className={styles.performerDescription} key={index}>
-                    {parag.toString()}
-                  </p>
-                ))}
-              </>
-            )}
+            <CSSTransition
+              in={p.showDesc}
+              timeout={1000}
+              classNames='fadeTransition'
+            >
+              {p.showDesc ? (
+                <div>
+                  {p.paragraphs.map((parag, index) => (
+                    <p key={index}>{parag.toString()}</p>
+                  ))}
+                </div>
+              ) : (
+                <span></span>
+              )}
+            </CSSTransition>
             <hr />
           </div>
         </div>
diff --git a/pages/program.tsx b/pages/program.tsx
index 37903dd..a7a899e 100644
--- a/pages/program.tsx
+++ b/pages/program.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 import styles from '../styles/Program.module.scss';
 import shared from '../styles/Shared.module.scss';
+import { CSSTransition } from 'react-transition-group';
 
 interface DayToggles {
   wed: boolean;
@@ -44,17 +45,25 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.wed && (
-          <>
-            <p>
-              18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
-              rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
-              (sateella sisällä).
-            </p>
-            <p>Sydämellisesti tervetuloa!</p>
-            <p>Paikka: Huhtakarintie 24, Livonsaari</p>
-          </>
-        )}
+        <CSSTransition
+          in={dayToggles.wed}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.wed ? (
+            <div>
+              <p>
+                18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
+                rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
+                (sateella sisällä).
+              </p>
+              <p>Sydämellisesti tervetuloa!</p>
+              <p>Paikka: Huhtakarintie 24, Livonsaari</p>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.dayContainer}>
@@ -71,26 +80,34 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.thu && (
-          <>
-            <p>
-              14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
-              kokoonpanon, joka on saanut kolmannen kiinnityksen
-              kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
-              Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää
-              kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
-              Laurin esittäminä.
-            </p>
-            <p>
-              17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
-              Laiturissa. Esiintymässä mm. Anja Erämaja.
-            </p>
-            <p>
-              Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
-              Voiponlahdentie 37, Palva
-            </p>
-          </>
-        )}
+        <CSSTransition
+          in={dayToggles.thu}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.thu ? (
+            <div>
+              <p>
+                14-16 Ainot ja Lauri esittävät Lähellä-nimisen
+                poikkitaiteellisen kokoonpanon, joka on saanut kolmannen
+                kiinnityksen kiertopalkintoon Willi Kansa -katselmuksessa
+                marraskuussa 2021 Irja ja Veikko Aro-Heinilän pihamaalla.
+                Toisessa osassa iltapäivää kuullaan Irja Aro-Heinilän ja Arto
+                Juurakon tekstejä Ainojen ja Laurin esittäminä.
+              </p>
+              <p>
+                17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
+                Laiturissa. Esiintymässä mm. Anja Erämaja.
+              </p>
+              <p>
+                Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
+                Voiponlahdentie 37, Palva
+              </p>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.dayContainer}>
@@ -107,36 +124,45 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.fri && (
-          <>
-            <p>
-              11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
-            </p>
-            <p>
-              Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
-              viestintäkonsultti Laura Rantanen.
-            </p>
-            <p>
-              14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
-              puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
-            </p>
-            <p>
-              Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
-              Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
-            </p>
-            <p>
-              Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
-              Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu,
-              kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
-              koskettimet), Roberto Lanz (rummut).
-            </p>
-            <p>
-              Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
-              tori.
-            </p>
-            <p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
-          </>
-        )}
+        <CSSTransition
+          in={dayToggles.fri}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.fri ? (
+            <div>
+              <p>
+                11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati
+                Urho.
+              </p>
+              <p>
+                Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
+                viestintäkonsultti Laura Rantanen.
+              </p>
+              <p>
+                14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä
+                puutarhalavalla tai myrskyn sattuessa Seurantalon salissa.
+              </p>
+              <p>
+                Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina
+                Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso.
+              </p>
+              <p>
+                Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä
+                Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu,
+                kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso,
+                koskettimet), Roberto Lanz (rummut).
+              </p>
+              <p>
+                Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen
+                tori.
+              </p>
+              <p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.dayContainer}>
@@ -153,27 +179,35 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.sat && (
-          <>
-            <p>
-              13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
-              äärelle.
-            </p>
-            <p>
-              Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
-              luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii
-              myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
-              kanssa ja ihailemaan ympäröivää luontoa.
-            </p>
-            <p>
-              Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
-              (luuttu).
-            </p>
-            <p>
-              Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
-            </p>
-          </>
-        )}
+        <CSSTransition
+          in={dayToggles.sat}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.sat ? (
+            <div>
+              <p>
+                13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu
+                mystisen äärelle.
+              </p>
+              <p>
+                Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
+                luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii
+                myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden
+                kanssa ja ihailemaan ympäröivää luontoa.
+              </p>
+              <p>
+                Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen
+                (luuttu).
+              </p>
+              <p>
+                Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
+              </p>
+            </div>
+          ) : (
+            <></>
+          )}
+        </CSSTransition>
         <hr />
       </div>
     </section>
diff --git a/styles/Info.module.scss b/styles/Info.module.scss
index 4b6fc5a..49bd5d8 100644
--- a/styles/Info.module.scss
+++ b/styles/Info.module.scss
@@ -8,7 +8,7 @@
     width: 80%;
   }
 
-  p {
+  div {
     width: 80%;
   }
 }
diff --git a/styles/Program.module.scss b/styles/Program.module.scss
index d2c5247..2020319 100644
--- a/styles/Program.module.scss
+++ b/styles/Program.module.scss
@@ -9,7 +9,7 @@
     width: 80%;
   }
 
-  p {
+  div {
     width: 80%;
   }
 }
diff --git a/styles/transitions.scss b/styles/transitions.scss
new file mode 100644
index 0000000..266ca42
--- /dev/null
+++ b/styles/transitions.scss
@@ -0,0 +1,17 @@
+.fadeTransition-enter {
+  opacity: 0;
+}
+
+.fadeTransition-enter-active {
+  opacity: 1;
+  transition: opacity 1000ms;
+}
+
+.fadeTransition-exit {
+  opacity: 1;
+}
+
+.fadeTransition-exit-active {
+  opacity: 0;
+  transition: opacity 1000ms;
+}