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;
}
&:not(.vertical) {
animation: bounce 0.35s ease 4 alternate;
}
&.vertical {
margin: 7px;
@ -216,6 +220,8 @@
width: 40px;
height: 40px;
}
animation: shake 0.35s ease-in-out;
}
&.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 {
width: 50px;
height: 50px;