LumeWeb
/
extension
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: restructure animation css

This commit is contained in:
Derrick Hammer 2023-07-27 19:28:02 -04:00
parent a11abc7bda
commit a6b962149a
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 84 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/apps/dashboard/components/Art.scss
View File

@ -9,6 +9,12 @@
transform: translate(-50%, -125%); transform: translate(-50%, -125%);
transition: left 500ms, transform 500ms; transition: left 500ms, transform 500ms;
z-index: -1; z-index: -1;
.art-rotate {
// transform: rotate(-180deg);
animation: 5000ms rotate linear infinite;
transition: transform 500ms;
.art { .art {
position: relative; position: relative;
@include fluid-width-height(9.0625rem, 9.0625rem); @include fluid-width-height(9.0625rem, 9.0625rem);
@ -70,18 +76,20 @@
z-index: -4; z-index: -4;
} }
} }
}
&.connected { &.connected {
top: 50%; top: 50%;
left: -35em; left: -35em;
transform: translate(0, -50%); transform: translate(0, -50%);
.art-rotate { .art-rotate {
transform: rotate(-151.13deg); transform: rotate(-151.13deg);
animation: none; animation: none;
.art { .art {
@include fluid-width-height(72rem, 72rem); @include fluid-width-height(72rem, 72rem);
}
}
.gradient-1 { .gradient-1 {
opacity: 0; opacity: 0;
} }
@ -90,8 +98,15 @@
opacity: 1; opacity: 1;
} }
} }
}
}
&.pulse { &.pulse {
.art-rotate {
will-change: transform;
transform: rotate(-151.13deg);
animation: none;
.art {
.gradient-1 { .gradient-1 {
opacity: 0; opacity: 0;
} }
@ -102,17 +117,8 @@
} }
} }
.art-rotate {
// transform: rotate(-180deg);
animation: 5000ms rotate linear infinite;
transition: transform 500ms;
&.connected {
transform: rotate(-151.13deg);
animation: none;
} }
} }
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
opacity: 0; opacity: 0;