Animate cowebsite icons
This commit is contained in:
parent
bc03182129
commit
7e966a7381
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user