paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

idle-animation

Browse Source
This commit is contained in:
Paul Martin
2023-11-16 19:45:40 +01:00
parent ff1916adca
commit b130cb5e55
3 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
style.css
View File

@ -4,7 +4,7 @@
body
{
background-color: #FFE49F;
background-image: url("noise-texture.svg");
background-image: url("resources/noise-texture.svg");
color: #E07A31;
font-family: "League Spartan";
}
@ -210,7 +210,9 @@ button {
background-color: rgb(80, 239, 244);
position: relative;
right: 200px;
z-index: 0;
animation: appear 0.4s 0s ease-in;
animation: idle-blue s 0.4s infinite;
}
#green {
@ -218,7 +220,9 @@ button {
position: relative;
top: -200px;
right: 150px;
z-index: 2;
animation: appear 0.4s -0.075s ease-in;
animation: idle-green 5s 0.3s infinite;
}
#red {
@ -226,7 +230,9 @@ button {
position: relative;
left: 60px;
top: -45px;
z-index: 1;
animation: appear 0.4s -0.15s ease-in;
animation: idle-red 7s 0.3s infinite;
}
@keyframes text-in-out {
@ -264,6 +270,33 @@ button {
100% {transform: scale(1)}
}
@keyframes idle-blue {
0% {transform: scale(1); }
20% {transform: scale(1.4); }
40% {transform: scale(1.1); transform: translateY(40px);}
60% {transform: scale(0.8); transform: translateX(50px)}
80% {transform: scale(0.9); ;}
95% {transform: scale(1); ; transform: translateY(-40px); transform: translateX(-50px);}
}
@keyframes idle-green {
0% {transform: scale(1); }
20% {transform: scale(0.8); }
40% {transform: scale(1.1); transform: translateY(70px);}
60% {transform: scale(0.9); transform: translateX(-20px)}
80% {transform: scale(1.3); }
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
}
@keyframes idle-red {
0% {transform: scale(1); ;}
20% {transform: scale(1.3); z-index: 3;}
40% {transform: scale(1.2); z-index: 2; transform: translateY(-60px);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-45px)}
80% {transform: scale(0.9); z-index: 0;}
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
}
@keyframes move-down-1 {
0% {top: 0px; right: 0px}
100% {top: 0px; right: 1000px}