shop 페이지 만들어보기 v2

목표
상단의 배너 만들기

페이지를 열면
Welcome to my shop 글자가 살짝 튕기듯 나타나도록

<section class="mainBanner">
  <h1 class="text">
    Welcome to my shop
  </h1>
</section>

.mainBanner {
    width: 100%;
    height: 280px;
    background-image: url("./img/banner.jpg");
    background-size: cover;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.mainBanner .text {
    font-size: 42px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

    animation: titleText 1s ease-in-out;
}

@keyframes titleText {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }
    92% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}