ol-ext/src/overlay/Popup.anim.css

A set of cool extensions for OpenLayers (ol) in node modules structure

/** 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%;
}