为了在点击时添加消息动画，可以在按钮的点击事件处理程序中使用CSS类和JavaScript动画。以下是一个简单的代码示例：

HTML:

点击添加消息

CSS:

.message {
  background-color: #f9f9f9;
  border-left: 4px solid #ddd;
  margin: 0 0 12px 0;
  padding: 15px;
  animation: message-in 0.5s ease-in;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

JavaScript:

const messageBtn = document.getElementById('message-btn');
const messageContainer = document.getElementById('message-container');

messageBtn.addEventListener('click', () => {
  const message = document.createElement('div');
  message.classList.add('message');
  message.textContent = '这是一条新的消息！';
  messageContainer.appendChild(message);
});

这个例子中，每次点击“message-btn”按钮时，我们使用JavaScript创建一个具有“消息”类的新div。通过CSS的“message-in”键帧动画，这个新的消息div将以动画效果滑入容器中，从而创建了一个很棒的交互式消息体验。