Every time when I try to add value to my message that needs to be printed whole CSS animation just doesn't work. I want to add a date under my printed message, everything works well until I add something else to my innerHTML.

msg = "<div class='msg rcvd'>"   messages.msg   "</div>";

date = "<span style='font-size: 10px; color: gray; display: flex; justify-content: left'>"   messages.time  "</span><br>";

document.getElementById("messages").innerHTML  = msg;
document.getElementById("messages").innerHTML  = date;
        

        
//messages.time is a timestamp
//messages.msg is the content of my message from the database

#messages {
    --rad: 20px;
    --rad-sm: 3px;
    font: 16px/1.5 sans-serif;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin: auto;
}
.msg {
    position: relative;
    max-width: 75%;
    padding: 7px 15px;
    margin-bottom: 2px;
    height: max-content;
    overflow-wrap: break-word;
  }
.msg.sent {
    border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
    background: #42a5f5;
    color: #fff;
    /* moves it to the right */
    margin-left: auto;
}
  
.msg.rcvd {
    border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
    background: #f1f1f1;
    color: #555;
    /* moves it to the left */
    margin-right: auto;
}
/* Improve radius for messages group */

.msg.sent:first-child,
.msg.rcvd .msg.sent {
  border-top-right-radius: var(--rad);
}

.msg.rcvd:first-child,
.msg.sent .msg.rcvd {
  border-top-left-radius: var(--rad);
}


/* time */

.msg::before {
  content: attr(data-time);
  font-size: 0.8rem;
  position: absolute;
  bottom: 100%;
  color: #888;
  white-space: nowrap;
  /* Hidden by default */
  display: none;
}

.msg.sent::before {
  right: 15px;
}

.msg.rcvd::before {
  left: 15px;
}


/* Show time only for first message in group */

.msg:first-child::before,
.msg.sent .msg.rcvd::before,
.msg.rcvd .msg.sent::before {
  /* Show only for first message in group */
  display: block;
}

.msg.rcvd:last-child{
  animation: newReceived 350ms linear 0s 1 normal forwards;
}
.msg.sent:last-child{
  animation: newSent 350ms linear 0s 1 normal forwards;
}
  
@keyframes typing{
  0%{
    transform: scale(1)
  }
  33%{
    transform: scale(1)
  }
  50%{
    transform: scale(1.4)
    }
  100%{
    transform: scale(1)
    }
}

@keyframes newReceived {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes newSent {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

<div id="messages" ></div>

As you can see from the snipet, the keyframe just doesn't run.

CodePudding user response：

These 2 worked when I added them, check them out:

.msg.rcvd:nth-last-of-type(1)
.msg.sent:nth-last-of-type(1)