FumeNodes/linktree
1
0
Fork 0
mirror of https://github.com/johnggli/linktree.git synced 2026-08-16 22:46:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: change transition duration

Browse Source
This commit is contained in:
john-emerson14
2020-03-22 01:49:52 -03:00
parent 1217701768
commit 9d283d9108
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
style.css
View File

@@ -4,18 +4,21 @@
--bgColor: #223344; --bgColor: #223344;
--accentColor: #E6E6E6; --accentColor: #E6E6E6;
--font: 'Karla', sans-serif; --font: 'Karla', sans-serif;
--delay: .5s;
} }
body { body {
min-height: 100vh; min-height: 100vh;
background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, #090a0f 100%); background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, #090a0f 100%);
animation: 1s ease-out 0s 1 transitionAnimation; /* duration/timing-function/delay/iterations/name */ opacity: 0;
animation: 1s ease-out var(--delay) 1 transitionAnimation; /* duration/timing-function/delay/iterations/name */
animation-fill-mode: forwards;
} }
@keyframes transitionAnimation { @keyframes transitionAnimation {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-25px); transform: translateY(-10px);
} }
100% { 100% {
opacity: 1; opacity: 1;
@@ -95,7 +98,7 @@ body {
background: linear-gradient(90deg, #000, #fff, #000); background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 80%; background-size: 80%;
animation: animate 3s linear infinite; animation: animate 3s linear var(--delay) infinite;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0); -webkit-text-fill-color: rgba(255, 255, 255, 0);
} }