lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Animate cowebsite icons

Browse source
This commit is contained in:
Alexis Faizeau 2022-02-01 17:52:10 +01:00
parent bc03182129
commit 7e966a7381
1 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
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;