使用CSS创建iOS样式的新消息动画

Question

我现有的代码......

我正在编写将在我的应用程序中使用的聊天系统的前端。我已经完成了聊天消息的初始样式，请参见此处：

body {
  background: #6960b7;
}

/* FOR SO TESTING */

* {
  font-family: Helvetica;
}

p {padding:0;margin:0}

/* Define the chat container */

#chat_container {
  width: 470px;
  height: 300px;
}

/* Define the messages */

#chat_container .chat_message {
  position: relative;
  padding: 15px 30px 25px;
  overflow: hidden;
}
#chat_container .chat_message .chat_avatar {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  z-index: 10;
}
#chat_container .chat_message.me .chat_avatar {
  left: auto;
  right: 0;
}
#chat_container .chat_message .message {
  position: relative;
  left: 60px;
  max-width: 255px;
  word-wrap: break-word;
  padding: 10px 20px;
  background: #bc6deb;
  float: left;
  border-radius: 20px;
}
#chat_container .chat_message.me .message {
  background: #4fa9e1;
  float: right;
  left: auto;
  margin-right: 60px;
}
#chat_container .chat_message .message p {
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  color: #fff;
  line-height: 150%;
  margin: 0;
  padding: 0;
}
#chat_container .chat_message .time {
  position: absolute;
  bottom: 0;
  left: 100px;
  font-size: 15px;
  color: #fff;
}
#chat_container .chat_message.me .time {
  left: auto;
  right: 100px;
}
/* Define the message chat ticks */

#chat_container .chat_message .message:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -7px;
  height: 20px;
  border-left: 20px solid #bc6deb;
  border-bottom-right-radius: 16px 14px;
  transform: translate(0, -2px);
  z-index: 2;
}
#chat_container .chat_message .message:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: #6960b7;
  border-bottom-right-radius: 10px;
  transform: translate(-30px, -2px);
  z-index: 3;
}
#chat_container .chat_message.me .message:before {
  left: auto;
  right: -7px;
  border-color: #4fa9e1;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 16px 14px;
  z-index: 2;
}
#chat_container .chat_message.me .message:after {
  left: auto;
  right: -56px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 10px;
  z-index: 3;
}

<div id="chat_container">
  <div class="chat_message me">
    <img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
    <div class="message">
      <p>Where are you?</p>
    </div>
    <p class="time">2 mins ago</p>
  </div>
  <div class="chat_message">
    <img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
    <div class="message">
      <p>We are at the bar!</p>
    </div>
    <p class="time">20 secs ago</p>
  </div>
  <div class="chat_message">
    <img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
    <div class="message">
      <p>What time do you reckon you will get here? We should be sticking around for a bit...</p>
    </div>
    <p class="time">Just Now</p>
  </div>
</div>

我想要实现的目标......

在iOS上，当收到新消息时，它会在屏幕上显示时生成动画（它不再存在）。我相信这个动画是不透明度和比例的组合，但是，我不是百分百肯定。

我不太热衷于使用transform:scale()方法，因为这在视网膜屏幕上无法呈现得特别好（无论图形大小如何）。在这个阶段排除JavaScript / jQuery，正如我可以处理的那样，是否有人知道预先存在的'Pure CSS'解决方案来复制iOS上新消息的动画？