docs: animate logo on load (#3645)

tmorehouse · jacobmllr95 · commit 88e54ca6cff2 · 2019-07-09T08:57:08.000+02:00
* docs: animate logo on load

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue

* Update index.vue
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -442,21 +442,29 @@ $bv-angle-padding-md: calc(#{$bv-angle-padding} * 2);
 
 .bv-logo {
   filter: drop-shadow(-3px 12px 2px #e7e7e7);
+  animation: logo-splash 0.35s 1 ease-in-out;
+  width: 100%; // IE11 Fix
+  max-width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+  transform-style: preserve-3d;
 }
 
-#logo {
-  animation: logo-flip 1s;
-  transform-style: preserve-3d;
+@media (prefers-reduced-motion: reduce) {
+  .bv-logo {
+    transition: none;
+    animation: none;
+  }
 }
 
-@keyframes logo-flip {
+@keyframes logo-splash {
   0% {
-    opacity: 0.5;
-    transform: rotateY(180deg);
+    opacity: 0.1;
+    transform: scale(0.75);
   }
   100% {
     opacity: 1;
-    transform: rotateY(0deg);
+    transform: scale(1);
   }
 }
 </style>
