components/BarGraph.module.css

@@ -1,9 +1,15 @@
 .barBackground {
   fill: var(--card-background);
+  transition: fill 0.5s ease-out;
 }
 
 .bar {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
+}
+
+.barGroup {
+  transition: fill 0.5s ease-out;
 }
 
 .barGroup:hover .bar {

components/Boxplot.module.css

@@ -1,5 +1,6 @@
 .boxplot {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
 }
 
 .boxplot:hover {

components/GroupedBarGraph.module.css

@@ -19,6 +19,10 @@
   fill: var(--label);
 }
 
+.bar {
+  transition: fill 0.5s ease-out;
+}
+
 .legend {
   display: flex;
   margin: calc(16rem / 16);

components/GroupedBarGraph.tsx

@@ -603,6 +603,7 @@ function HoverableBar(props: HoverableBarProps) {
       }}
     >
       <Bar
+        className={styles.bar}
         onMouseMove={onMouseMove}
         onMouseOut={onMouseOut}
         x={bar.x}

components/Header.module.css

@@ -79,6 +79,7 @@
 .menuIcon {
   background: none;
   border: none;
+  transition: opacity 0.5s ease-out;
 }
 
 .menuIcon:hover {
@@ -115,6 +116,7 @@
   margin-left: calc(20rem / 16);
   /* transparent border fixes weird coloring on the border in some browsers */
   border: calc(1rem / 16) solid transparent;
+  transition: background-color 0.25s ease-out;
 }
 
 .closeMenuButton:hover {

components/LineGraph.module.css

@@ -4,10 +4,14 @@
   fill: var(--label);
 }
 
-.line:hover {
-  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+.line {
+  transition: filter 0.5s ease-out;
 }
 
+.line:hover {
+  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+  transition: filter 0.5s ease-out;
+}
 
 .wrapper {
   display: flex;

components/PieChart.module.css

@@ -4,6 +4,7 @@
   stroke-width: 1px;
   stroke-dasharray: 0;
   stroke-linecap: round;
+  transition: fill 0.5s ease-out;
 }
 
 .labelPath {

components/Sections.module.css

@@ -50,13 +50,29 @@
   color: var(--primary-text);
 }
 
-.linkName:hover {
-  text-decoration: underline;
+.linkName:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: calc(1rem / 16);
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-text);
+  cursor: pointer;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.linkName:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .linkName {
   margin: 0;
   display: inline;
+  position: relative;
 }
 
 @media screen and (max-width: 900px) {
@@ -67,4 +83,5 @@
   .sections h1 {
     text-align: left;
   }
+
 }

components/StackedBarGraph.module.css

@@ -2,8 +2,13 @@
   position: relative;
 }
 
+.barStack {
+  transition: filter 0.5s ease-out;
+}
+
 .barStack:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
+  transition: filter 0.5s ease-out;
 }
 
 .legend {

components/WordCloud.module.css

@@ -2,4 +2,8 @@
   text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
   text-anchor: "middle";
   cursor: default;
+}
+
+.word {
+  transition: text-shadow 0.25s ease-out;
 }

pages/_app.css

@@ -120,6 +120,7 @@ p {
 a {
   color: var(--link);
   text-decoration: none;
+  transition: color 0.5s ease-out;
 }
 
 a:hover {