Commit b439b28d authored by Klaus-Dieter Quibeldey-Cirkel's avatar Klaus-Dieter Quibeldey-Cirkel
Browse files

styling start animation

parent 403a66a7
Pipeline #86204 passed with stages
in 9 minutes and 8 seconds
......@@ -6,9 +6,9 @@
<div data-nosnippet
class="main-container">
<div class="bg-object" style="top: 20%; left: 20%; --delay: 0s;">?</div>
<div class="bg-object" style="top: 30%; left: 80%; --delay: 2s; --anim: bg-object-anim-reverse;">?</div>
<div class="bg-object" style="top: 40%; left: 50%; --delay: 4s; --anim: bg-object-anim-reverse;">?</div>
<div class="bg-object" style="top: 20%; left: 20%; animation-delay: 0s;">?</div>
<div class="bg-object" style="top: 30%; left: 80%; animation-delay: 2s;">?</div>
<div class="bg-object" style="top: 40%; left: 50%; animation-delay: 5s;">?</div>
<div fxLayout="row"
fxLayoutAlign="center">
......
......@@ -107,39 +107,23 @@ mat-card-header {
}
.bg-object {
--delay: 0s;
width: 15px;
height: 15px;
font-size: 40px;
line-height: 40px;
font-size: 70px;
line-height: 100%;
font-weight: bold;
position: absolute;
opacity: 0.4;
transform: scale(0) translate(-50%, -50%);
z-index: 1000;
@media (min-width: 750px) {
animation: var(--anim, bg-object-anim) 7s ease-in forwards infinite;
animation-delay: var(--delay);
}
}
@keyframes bg-object-anim-reverse {
from {
color: var(--secondary);
opacity: 0.5;
transform: scale(0) translate(-50%, -50%);
}
to {
color: var(--primary);
opacity: 0;
transform: scale(10) translate(-50%, -50%);
animation: var(--anim, bg-object-anim) 10s ease-in-out 3;
}
}
@keyframes bg-object-anim {
from {
color: var(--secondary);
opacity: 0.6;
opacity: 0.5;
transform: scale(0) translate(-50%, -50%);
}
to {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment