這一頁的效果是怎麼實現(xiàn)的？

https://store.snapchat.com/

我發(fā)現(xiàn)了這一頁他會先出圖
然後出現(xiàn)字
這要怎麼樣實現(xiàn)?。坑薪?jīng)過jquery嗎？

補充

.ba {
    animation: anm_img_1  5s forwards;
    -webkit-animation: anm_img_1 5s forwards;
    width: 247px;
}

@keyframes anm_img_1
{
  0%, 25% {
    opacity: 0;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
  }
  30%, 45% {
    opacity: 1;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
  }
  50% {
    opacity: 1;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
  }
  100% {
    position: absolute;
    top:-50px;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    opacity: 1;
  }
}

<div class="transform50">
  <img class="ba" src="images/chatgether01.png">
</div>

我這樣跟他還是不太一樣
是哪裡寫錯？

字要怎麼出現(xiàn)這還真的考倒我了