50 lines
1.1 KiB
CSS
50 lines
1.1 KiB
CSS
/** popup animation using visible class
|
|
*/
|
|
.ol-popup.anim {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.ol-popup.anim.visible {
|
|
visibility: visible;
|
|
}
|
|
/** No transform when visible
|
|
*/
|
|
.ol-popup.anim.visible > div {
|
|
visibility: visible;
|
|
transform: none;
|
|
animation: ol-popup_bounce 0.4s ease 1;
|
|
}
|
|
|
|
@keyframes ol-popup_bounce {
|
|
from { transform: scale(0); }
|
|
50% { transform: scale(1.1) }
|
|
80% { transform: scale(0.95) }
|
|
to { transform: scale(1); }
|
|
}
|
|
|
|
/** Transform Origin */
|
|
.ol-popup.anim.ol-popup-bottom.ol-popup-left > div {
|
|
transform-origin:0 100%;
|
|
}
|
|
.ol-popup.anim.ol-popup-bottom.ol-popup-right > div {
|
|
transform-origin:100% 100%;
|
|
}
|
|
.ol-popup.anim.ol-popup-bottom.ol-popup-center > div {
|
|
transform-origin:50% 100%;
|
|
}
|
|
.ol-popup.anim.ol-popup-top.ol-popup-left > div {
|
|
transform-origin:0 0;
|
|
}
|
|
.ol-popup.anim.ol-popup-top.ol-popup-right > div {
|
|
transform-origin:100% 0;
|
|
}
|
|
.ol-popup.anim.ol-popup-top.ol-popup-center > div {
|
|
transform-origin:50% 0;
|
|
}
|
|
.ol-popup.anim.ol-popup-middle.ol-popup-left > div {
|
|
transform-origin:0 50%;
|
|
}
|
|
.ol-popup.anim.ol-popup-middle.ol-popup-right > div {
|
|
transform-origin:100% 50%;
|
|
}
|