diff --git a/README.md b/README.md
index 8d8def2a0..fba6b74b4 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ with.
## My JavaScript Demos - I Love JavaScript!
+* [CSS Enter Animations Follow The 80/20 Rule](https://bennadel.github.io/JavaScript-Demos/demos/enter-animations-80-20)
* [Reading Element Attributes In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/attribute-parts)
* [Using The AngularJS Parser To Comply With CSP In Alpine.js 3.13.5](https://bennadel.github.io/JavaScript-Demos/demos/angularjs-parser-in-alpinejs)
* [JSON Explorer In Alpine.js 3.13.5](https://bennadel.github.io/JavaScript-Demos/demos/json-explorer-alpine3)
diff --git a/demos/enter-animations-80-20/index.htm b/demos/enter-animations-80-20/index.htm
new file mode 100644
index 000000000..8c9635805
--- /dev/null
+++ b/demos/enter-animations-80-20/index.htm
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+ CSS Enter Animations Follow The 80/20 Rule
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is the modal!
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demos/enter-animations-80-20/main.css b/demos/enter-animations-80-20/main.css
new file mode 100644
index 000000000..fee1b7d32
--- /dev/null
+++ b/demos/enter-animations-80-20/main.css
@@ -0,0 +1,73 @@
+body,
+button {
+ font-family: monospace ;
+}
+
+/* ----------------------------------------------------------------------------------- */
+/* ----------------------------------------------------------------------------------- */
+
+.show {
+ /* Button slides-up from bottom of screen. */
+ animation-duration: 300ms ;
+ animation-fill-mode: both ;
+ animation-iteration-count: 1 ;
+ animation-name: enter-show-button ;
+ animation-timing-function: ease-out ;
+
+ position: fixed ;
+ right: 20px ;
+ bottom: 20px ;
+}
+
+@keyframes enter-show-button {
+ from {
+ transform: translate3d( 0px, 100px, 0px ) ;
+ }
+ to {
+ transform: translate3d( 0px, 0px, 0px ) ;
+ }
+}
+
+aside {
+ background-color: #fafafa ;
+ box-shadow: -1px 0px 0px #cccccc ;
+ bottom: 0px ;
+ padding: 15px 30px ;
+ position: fixed ;
+ right: 0px ;
+ top: 0px ;
+ width: 300px ;
+ z-index: 2 ;
+}
+
+/* ----------------------------------------------------------------------------------- */
+/* ----------------------------------------------------------------------------------- */
+
+.modal {
+ /* Modal window fades and scales into view. */
+ animation-duration: 300ms ;
+ animation-fill-mode: both ;
+ animation-iteration-count: 1 ;
+ animation-name: enter-modal-window ;
+ animation-timing-function: ease-out ;
+
+ background-color: #fafafa ;
+ bottom: 0px ;
+ left: 0px ;
+ padding: 15px 30px ;
+ position: fixed ;
+ right: 0px ;
+ top: 0px ;
+ z-index: 2 ;
+}
+
+@keyframes enter-modal-window {
+ from {
+ opacity: 0.5 ;
+ transform: scale( 0.9 ) ;
+ }
+ to {
+ opacity: 1.0 ;
+ transform: scale( 1 ) ;
+ }
+}