finished notes

Author: taytestokes

README.MD

@@ -91,6 +91,8 @@ On the other hand, if animations are done right it will really make your site st
 
 One way we can create animations is by using a `keyframe`.
 
+### Keyframes
+
 Keyframes are a great way that we can be specific when creating some sort of animation. we will use the `@` sign to declare a keyframe with a name to reference it as.
 
 ```css
@@ -102,20 +104,20 @@ Keyframes are a great way that we can be specific when creating some sort of ani
 There are multiple ways that we can apply styles using a key frame. The first is `from` and `to`. This is where we can define a set of style rules from the start to the finish.
 
 ```css
-@keyframes {
+@keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
-        transform: rotate(1080deg);
+        transform: rotate(180deg);
     }
 }
 ```
 
 Then next way is using percentages inside of the animation, so we can be even more specific about how the animation will work.
 
 ```css
-@keyframes {
+@keyframes spin {
     0% {
         transform: rotate(0deg);
     }
@@ -194,4 +196,29 @@ export default class App extends Component {
     )
   }
 };
-```
+```
+
+### Transitions
+
+Transitions are another way we can animate our elements. This time, the animation will just be a simple transition that will allow us to create smooth transitions.
+
+All we need to do is use the `transition` property on our css elements. We will just define how long we want to the transition to happen.
+
+```css
+/* Transition Circle */
+.transition-circle {
+    height: 50px;
+    width: 50px;
+    margin: 25px auto;
+    background: salmon;
+    /* transition property to change values */
+    transition: .2s
+}
+
+.transition-circle:hover {
+    transform: scale(1.1);
+    border-radius: 50%;
+}
+```
+
+This will allow us to create simple animations on events such as a hover.

src/App.css

@@ -82,4 +82,19 @@
     100% {
         transform: scale(1) rotate(-45deg);
     }
+}
+
+/* Transition Circle */
+.transition-circle {
+    height: 50px;
+    width: 50px;
+    margin: 25px auto;
+    background: salmon;
+    /* transition property to change values */
+    transition: .2s
+}
+
+.transition-circle:hover {
+    transform: scale(1.1);
+    border-radius: 50%;
 }

src/App.js

@@ -25,7 +25,7 @@ export default class App extends Component {
 
   render() {
     return (
-      <div>
+      <div className="app-container">
         {/* Navbar */}
         <Navbar />
 
@@ -40,6 +40,9 @@ export default class App extends Component {
         {/* Beating Heart */}
         <div className="heart"></div>
 
+        {/* Transition Square to Circle */}
+        <div className="transition-circle"></div>
+        
       </div>
     )
   }

src/components/Navbar/Navbar.css

@@ -40,6 +40,34 @@
     margin: 0 5px;
 }
 
+/* slide out menu */
+.menu {
+    height: 100vh;
+    width: 200px;
+    background: #343A40;
+    position: fixed;
+    right: -200px;
+    z-index: 10;
+    transition: .3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.menu > a {
+    margin-top: 15px;
+    text-decoration: none;
+    color: white;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 16px;
+
+}
+
+.slide {
+    right: 0px;
+}
+
 /* Media Queries */
 @media (max-width: 900px) {
     /* get rid of links */

src/components/Navbar/Navbar.js

@@ -4,22 +4,50 @@ import React, { Component } from 'react'
 import './Navbar.css';
 
 export default class Navbar extends Component {
+    constructor(){
+        super()
 
+        this.state = {
+            menu: false
+        }
+    }
+
+    slide = () => {
+        this.setState({
+            menu: !this.state.menu
+        })
+    }
 
     render() {
         return (
-            <nav className="navbar">
-                <h1 className="navbar-title">Start Bootstrap</h1>
-                <div className="navbar-icon">
-                    &#9776;
-                </div>
-                <div className="navbar-menu">
+            <div>
+                {/* Navbar */}
+                <nav className="navbar">
+                    <h1 className="navbar-title">Start Bootstrap</h1>
+                    <div className="navbar-icon" onClick={this.slide}>
+                        &#9776;
+                    </div>
+                    <div className="navbar-menu">
+                        <a href="#">Home</a>
+                        <a href="#">About</a>
+                        <a href="#">Services</a>
+                        <a href="#">Contact</a>
+                    </div>
+                </nav>
+
+                {/* Slide Out Menu */}
+                <div className={
+                    this.state.menu ?
+                    'menu slide'
+                    :
+                    'menu'
+                }>
                     <a href="#">Home</a>
                     <a href="#">About</a>
                     <a href="#">Services</a>
                     <a href="#">Contact</a>
                 </div>
-            </nav>
+            </div>
         )
     }
 };