.container { position: absolute; bottom: 10px; right: 30px; border-radius: 3px; background: #000; color: #fff; font: initial; cursor: initial; letter-spacing: initial; text-shadow: initial; text-transform: initial; visibility: initial; padding: 7px 10px 8px 10px; align-items: center; box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.12); display: none; opacity: 0; transition: opacity 0.1s ease, bottom 0.1s ease; animation: fade-in 0.1s ease-in-out; } .container.visible { display: flex; } .container.building { bottom: 20px; opacity: 1; } .icon-wrapper { width: 16px; height: 16px; } .icon-wrapper > svg { width: 100%; height: 100%; } .icon-group { animation: strokedash 1s ease-in-out both infinite; } @keyframes fade-in { from { bottom: 10px; opacity: 0; } to { bottom: 20px; opacity: 1; } } @keyframes strokedash { 0% { stroke-dasharray: 0 226; } 80%, 100% { stroke-dasharray: 659 226; } }