Add animation framework

css/animations.css

@@ -0,0 +1,21 @@
+@keyframes slide-left {
+    from { margin-left: 0vw; }
+    to { margin-left: -100vw; }
+}
+
+@keyframes enter-right {
+    from { margin-left: 100vw; }
+    to { margin-left: 0vw; }
+}
+
+.anim-slide-left-begin {
+    animation-name: slide-left;
+    animation-timing-function: ease-in;
+    animation-duration: 0.5s;
+}
+
+.anim-slide-left-end {
+    animation-name: enter-right;
+    animation-timing-function: ease-out;
+    animation-duration: 0.3s;
+}

css/style.css

@@ -65,7 +65,7 @@ img {
 slide-deck div {
     height: 80vh;
     padding: 1em;
-    background: lightgray;
+    border: solid 2px lightgray;
 }
 
 @media only screen and (max-width: 960px) {
@@ -93,6 +93,6 @@ slide-controls {
     float: left;
 }
 
-nextslide {
+nextslide, transition {
     display: none;
 }