Parnswir/tie

#container {
    background-color: black;
    border: 1px solid black;
    width: 320px;
    height: 320px;
}

.text-frame {
    position: relative;
    width: 318px;
    top: 0em;
    height: 0em;
    transition: top .3s, height .3s, visibility .3s;

    display: flex;
    flex-direction: column;
    overflow: none;

    border-style: solid;
    border-width: 2px;
    background: white;

    cursor: pointer;
}

.text-frame.in {
    top: -2.7em;
    height: 2.7em;
    border-radius: 4px 4px 0 0;
    transition: top .3s, height .3s, visibility 0s;
}

.text-message {
    font-family: Lato;
    margin: 2px 14px 0 4px;
    visibility: hidden;
}

.text-frame.in>.text-message {
    visibility: visible;
    transition: visibility .3s step-end;
}

#text-indicator {
    position: relative;
    margin-left: auto;
    right: 4px;
    top: -1em;
    visibility: hidden;
}

#text-indicator.in {
    visibility: visible;
    transition: visibility .3s step-end;
    animation: blinking 1.5s linear infinite;
}

@keyframes blinking {  
    50% { opacity: 0; }
}