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

move transition durations into custom properties

This commit is contained in:
Ray Elliott 2022-04-19 17:16:07 +01:00
parent ee509c1f23
commit 246e441020
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,7 +9,7 @@
<div id="app" class="wrapper"> <div id="app" class="wrapper">
<ul class="orbitals clockwise"> <ul class="orbitals clockwise">
<li class="orbital bg bg--red pulse"> <li class="orbital bg bg--red pulse shadow">
<div class="orbital-content content-center anti-clockwise"> <div class="orbital-content content-center anti-clockwise">
<div class="feature"> <div class="feature">
<div class="feature-item primary"> <div class="feature-item primary">

8
style.css
View File

@ -7,6 +7,8 @@
--duration__rotation: 50s; --duration__rotation: 50s;
--duration__pulse: 1.5s; --duration__pulse: 1.5s;
--duration__image-hover: 0.3s;
--duration__feature-hover: 0.3s;
--width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital)); --width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
} }
@ -121,7 +123,7 @@ ul, li {
object-fit: cover; object-fit: cover;
&:last-child { &:last-child {
transition: opacity .3s; transition: opacity var(--duration__image-hover);
opacity: 0; opacity: 0;
} }
} }
@ -151,7 +153,7 @@ ul, li {
left: 0; left: 0;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.5s; transition: background-color var(--duration__feature-hover);
} }
} }
@ -199,7 +201,7 @@ ul, li {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: opacity 0.5s; transition: opacity var(--duration__feature-hover);
&:first-child { &:first-child {
opacity: 1; opacity: 1;