diff --git a/beating-heart/README.md b/beating-heart/README.md
index 5d711cf..90e7cce 100644
--- a/beating-heart/README.md
+++ b/beating-heart/README.md
@@ -36,7 +36,7 @@ This block of CSS defines the formatting for the entire HTML document. Every ele
 
 ### h1
 
-This CSS block defines custom formatting for all H1 tags.
+This CSS block defines custom formatting for all `<h1></h1>` tags.
 
 ````css
     h1 {
@@ -52,7 +52,7 @@ This CSS block defines custom formatting for all H1 tags.
 
 ### p
 
-This CSS block defines custom formatting for all P tags.
+This CSS block defines custom formatting for all `<p></p>` tags.
 
 ````css
     p {
@@ -66,3 +66,245 @@ This CSS block defines custom formatting for all P tags.
 2. The top margin is set to 10 pixels.
 3. Using singled digit RGB Hex Values, the color is defined as 60 Red (4), 68 Green (4) and 68 Blue (4).
 
+## Classes
+
+### .heart
+
+This block creates the area where we will draw and animate our heart.
+
+````css
+    .heart {
+      width: 100px;
+      height: 90px;
+      position: relative;
+      animation: beat 1.5s infinite 10s;
+    }
+````
+
+1. The width of the area is set to 100 pixels.
+2. The height of the area is set to 90 pixels.
+3. The position of the contents of this area are defined as relative from the top left 0px 0px to the bottom right 100px 90px.
+4. The animation `beat` is run as an infinite loop, where the keyframes are cycled from 0% to 100% every 1.5 seconds. The animation is also delayed to start 10 seconds after page load so that other animations can complete first.
+
+### .heart::before, .heart::after
+
+This block creates two additional areas, one before and one after the `.heart` area, and overlaps them with the `.heart` area.
+
+````css
+    .heart::before,
+    .heart::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      background: red;
+      border-radius: 0 0 0 0;
+    }
+````
+
+1. The content is left blank.
+2. The position of each of the additional areas is absolute to the original area, thus being top left 0px 0px and bottom right 100px 90px.
+3. The starting width of each of the additional areas is set to 1 pixel.
+4. The starting height of each of the additional areas is set to 1 pixel.
+5. The background color of each of the additional areas is set to Red (same as #ff0000 or #f00).
+6. The starting radius of the corners for each of the additional areas are set to 0, resulting in square corners.
+
+### .heart::before
+
+This block adds formatting and the animations that are unique to the area created before the `.heart` area.
+
+````css
+    .heart::before {
+      left: 0px;
+      transform: rotate(0deg);
+      transform-origin: 0% 100%;
+      animation: heartone 5s forwards, hearttwo 5s forwards 5s;
+    }
+````
+
+1. The starting position of the area is set to 0 pixels from the left of `.heart` area.
+2. The starting rotation of the area is set to 0 degrees.
+3. The point at which the rotation will pivot is set to 0% (most left) and 100% (most bottom) of the area.
+4. Two animations are run, `heartone` for 5 seconds with no repeat, and `hearttwo` for 5 seconds with no repeat but with a 5 second delay in order to allow the first animation to complete.
+
+### .heart::after
+
+This block adds formatting and the animations that are unique to the area created after the `.heart` area.
+
+````css
+    .heart::after {
+      left: 0px;
+      transform: rotate(0deg);
+      transform-origin: 100% 100%;
+      animation: heartone 5s forwards, heartthree 5s forwards 5s;
+    }
+````
+
+1. The starting position of the area is set to 0 pixels from the left of `.heart` area.
+2. The starting rotation of the area is set to 0 degrees.
+3. The point at which the rotation will pivot is set to 100% (most right) and 100% (most bottom) of the area.
+4. Two animations are run, `heartone` for 5 seconds with no repeat, and `heartthree` for 5 seconds with no repeat but with a 5 second delay in order to allow the first animation to complete.
+
+## Animations
+
+Animations are set using `@keyframes` blocks in CSS. In this example, we are using percentages to define the positions of an animation run. 0% being the start and 100% being the end. When an animation loops, then 100% is followed by 0%. (https://www.w3schools.com/cssref/atrule_keyframes.php)
+
+### heartone
+
+This block defines the keyframes for the animation called `heartone`.
+
+````css
+    @keyframes heartone {
+      0% {
+        width: 1px;
+        height: 1px;
+        border-radius: 0 0 0 0;
+      }
+      50% {
+        width: 50px;
+        height: 90px;
+        border-radius: 0 0 0 0;
+      }
+      100% {
+        width: 50px;
+        height: 90px;
+        border-radius: 50px 50px 0 0;
+      }
+    }
+````
+
+**At 0%:**
+1. The width is defined at 1 pixel.
+2. The height is defined at 1 pixel.
+3. The border radiuses are defined at 0.
+
+**At 50%:**
+1. The width will gradually change until it reaches 50 pixels.
+2. The height will gradually change until it reaches 90 pixels.
+3. The border radiuses will remain at 0.
+
+**At 100%:**
+1. The width will remain at 50 pixels.
+2. The height will remain at 90 pixels.
+3. The top left radius and top right radius will gradually change to 50 pixels. The bottom right and bottom left will remain 0 pixels.
+
+### hearttwo
+
+This block defines the keyframes for the animation called `hearttwo`.
+
+````css
+    @keyframes hearttwo {
+      0% {
+        left: 0px;
+        transform: rotate(0deg);
+        transform-origin: 0% 100%;
+      }
+      50% {
+        left: 50px;
+        transform: rotate(0deg);
+        transform-origin: 0% 100%;
+      }
+      100% {
+        left: 50px;
+        transform: rotate(-45deg);
+        transform-origin: 0% 100%;
+      }
+    }
+````
+
+**At 0%:**
+1. The position of the area is defined to be 0 pixels from the left.
+2. The area is defined to start with a 0 degree rotation.
+3. The point at which the rotation will pivot is set to 0% (most left) and 100% (most bottom) of the area.
+
+**At 50%:**
+1. The position of the area is gradually moved 50 pixels from the left.
+2. The area is kept with a 0 degree rotation.
+3. The point at which the rotation will pivot is kept at 0% (most left) and 100% (most bottom) of the area.
+
+**At 100%:**
+1. The position of the area is kept at 50 pixels from the left.
+2. The area will gradually rotate clockwise by 45 degrees.
+3. The point at which the rotation will pivot is kept at 0% (most left) and 100% (most bottom) of the area.
+
+### heartthree
+
+This block defines the keyframes for the animation called `heartthree`.
+
+````css
+    @keyframes heartthree {
+      0% {
+        left: 0px;
+        transform: rotate(0deg);
+        transform-origin: 100% 100%;
+      }
+      50% {
+        left: 0px;
+        transform: rotate(0deg);
+        transform-origin: 100% 100%;
+      }
+      100% {
+        left: 0px;
+        transform: rotate(45deg);
+        transform-origin: 100% 100%;
+      }
+    }
+````
+
+**At 0%:**
+1. The position of the area is defined to be 0 pixels from the left.
+2. The area is defined to start with a 0 degree rotation.
+3. The point at which the rotation will pivot is kept at 100% (most right) and 100% (most bottom) of the area.
+
+**At 50%:**
+1. The position of the area is kept at 0 pixels from the left.
+2. The area is kept with a 0 degree rotation.
+3. The point at which the rotation will pivot is kept at 100% (most right) and 100% (most bottom) of the area.
+
+**At 100%:**
+1. The position of the area is kept at 0 pixels from the left.
+2. The area will gradually rotate counter-clockwise by 45 degrees.
+3. The point at which the rotation will pivot is kept at 100% (most right) and 100% (most bottom) of the area.
+
+### beat
+
+This block defines the keyframes for the animation called `beat`.
+
+````css
+    @keyframes beat {
+      0%, 30%, 50%, 70%, 100% {
+        transform: scale(1);
+      }
+      40% {
+        transform: scale(1.5) skewY(-15deg);
+      }
+      60% {
+        transform: scale(1.5) skewY(15deg);
+      }
+    }
+````
+
+**At 0%:**
+1. The scale of the area is set to 100% of it's inherited size.
+
+**At 30%:**
+1. The scale of the area remains at 100% of it's inherited size.
+
+**At 40%:**
+1. The scale of the area is gradually changed to 150% of it's inherited size.
+2. The area is gradually skewed on the Y axis by 15 degrees counter-clockwise.
+
+**At 50%:**
+1. The scale of the area is gradually changed to 100% of it's inherited size.
+2. Because skewY is omitted, the previous skew transformation is gradually reverted.
+
+**At 60%:**
+1. The scale of the area is gradually changed to 150% of it's inherited size.
+2. The area is gradually skewed on the Y axis by 15 degrees clockwise.
+
+**At 70%:**
+1. The scale of the area is gradually changed to 100% of it's inherited size.
+2. Because skewY is omitted, the previous skew transformation is gradually reverted.
+
+**At 100%:**
+1. The scale of the area remains at 100% of it's inherited size.
\ No newline at end of file