Hiệu ứng CSS HTML

Hiệu ứng CSS HTML 

**** HTML

<div class="sologian-page">

    <div class="wr-container2222">

    <div class="catglobal">

    <div class="catmodule">Sản phẩm</div>

    <div class="catnhom">Gia công kim khí</div>     

    </div>

    </div>

</div>

**** CSS

.catglobal {

    position: absolute;

    bottom: 50px;

    left: 30px;

    text-align: left;

    color: #fff;

    animation: slideUp 0.6s ease-out forwards;

}

@keyframes slideUp {

  0% {

    opacity: 0;

    transform: translateY(30px); /* bắt đầu từ dưới */

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}