這一頁的效果是怎麼實現的？

Question

https://store.snapchat.com/

我發現了這一頁他會先出圖
然後出現字
這要怎麼樣實現啊？有經過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>

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

字要怎麼出現這還真的考倒我了

Answer 1

单独使用css也是可以的，css3的动画功能本身足够强大；当然，使用jqery易于实现一部分css3难以做到的动画。