Animate cowebsite icons

This commit is contained in:
Alexis Faizeau 2022-02-01 17:52:10 +01:00
parent bc03182129
commit 7e966a7381

View file

@ -204,6 +204,10 @@
border-image-outset: 1; border-image-outset: 1;
} }
&:not(.vertical) {
animation: bounce 0.35s ease 4 alternate;
}
&.vertical { &.vertical {
margin: 7px; margin: 7px;
@ -216,6 +220,8 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
animation: shake 0.35s ease-in-out;
} }
&.displayed { &.displayed {
@ -259,6 +265,41 @@
} }
} }
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-15px);
}
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
60% {
transform: translateX(-10px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.cowebsite-icon { .cowebsite-icon {
width: 50px; width: 50px;
height: 50px; height: 50px;