Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add a little hand, inviting the user to drag location inputs

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-09-29 19:48:36 +02:00
parent bbee0bce5d
commit 6dcc710cc2
4 changed files with 101 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

46
index.css
View file

@ -307,6 +307,7 @@ li::marker {
@keyframes slide {
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
from {
transform: translateX(0%);
}
@ -316,6 +317,51 @@ li::marker {
}
}
.hand-drag-animation {
animation: hand-drag-animation 6s ease-in-out infinite;
transform-origin: 50% 125%;
}
@keyframes hand-drag-animation {
/* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */
0% {
opacity: 0;
transform: rotate(-30deg);
}
6% {
opacity: 1;
transform: rotate(-30deg);
}
12% {
opacity: 1;
transform: rotate(-45deg);
}
24% {
opacity: 1;
transform: rotate(-00deg);
}
30% {
opacity: 1;
transform: rotate(-30deg);
}
36% {
opacity: 0;
transform: rotate(-30deg);
}
100% {
opacity: 0;
transform: rotate(-30deg);
}
}
/**************************************/