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

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

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