rayelliott
/
css-orbital
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

use custom properties for durations

This commit is contained in:
Ray Elliott 2022-04-19 15:59:24 +01:00
parent b425b2dd1a
commit 118fe49211
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
style.css
View File

@ -1,9 +1,12 @@
:root {
--width__inner-content: 10em;
--width__orbital: 7em;
--width__inner-content: 11em;
--width__orbital: 7.5em;
--radius__orbital: 14em;
--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);
--duration__rotation: 50s;
--duration__pulse: 1.5s;
}
body, html {
@ -98,7 +101,8 @@ ul, li {
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.3;
border-radius: 3em;
overflow: hidden;
}
.image-hover {
@ -164,16 +168,16 @@ ul, li {
}
.clockwise {
animation: rotate 20s linear infinite;
animation: rotate var(--duration__rotation) linear infinite;
}
.anti-clockwise {
animation: rotate 20s reverse linear infinite;
animation: rotate var(--duration__rotation) reverse linear infinite;
}
.pulse {
&::before {
animation: pulse 2s alternate ease-in-out infinite;
animation: pulse var(--duration__pulse) alternate ease-in-out infinite;
}
}
@ -191,6 +195,6 @@ ul, li {
transform: scale(1);
}
to {
transform: scale(1.2);
transform: scale(1.15);
}
}