Generiere vier Fotos, große Ansicht und Flippy Floppy

KIKunstKirstenKlöckner/wwwroot/css/site.css

@@ -63,6 +63,56 @@ a, .btn-link {
     color: white;
 }
 
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
+.blazor-error-boundary::after {
+    content: "An error has occurred."
+}
+
+.fade-in-5 {
+    animation: fadeIn 5s;
+    animation-fill-mode: forwards;
+}
+.fade-out-5 {
+    animation: fadeOut 5s;
+    animation-fill-mode: forwards;
+}
+
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
     }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.flip-image {
+    animation: flip 0.6s;
+    animation-fill-mode: forwards;
+    -webkit-backface-visibility: hidden;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    backface-visibility: hidden;
+}
+
+@keyframes flip {
+    0% {
+        transform: rotateY(0deg);
+    }
+
+    100% {
+        transform: rotateY(180deg);
+    }
+}