Css animation 기능

애니메이션기능을 이용한 표지 만들기.

시작하기전 제가 만든 페이지의 표지 먼저 보여드리겠습니다.

홈페이지의 표지를 만들려고 고민 하던중 아이폰 처음 시작할때 나오는 화면을 생각하게 되었습니다.
그래서 저 화면을 어떻게 하면 나올까 검색하던중 애니메이션 기능을 알게 되었습니다.

HTML 코드

   <nav class="main_title" id="home">
      <div class="main_title-hellokr">안녕하세요</div>
      <div class="main_title-scrollkr">
        <i class="fa-solid fa-angles-down"></i> 글을 읽으려면 내려주세요
      </div>
      <div class="main_title-helloeng">Hello</div>
      <div class="main_title-scrolleng">
        <i class="fa-solid fa-angles-down"></i> Scroll down to read
      </div>
      <div class="main_title-hellochn">你好。</div>
      <div class="main_title-scrollchn">
        <i class="fa-solid fa-angles-down"></i>向下滚动阅读
      </div>
    </nav>

이렇게 코드를 작성하였고 한국어 영어 중국어 순서대로 나오도록 설정하고싶었습니다.

처음에는 각 문장들이 겹쳐져 보이도록

/* 안녕 글자들 한자리에 고정, 사이즈 설정 ,가운데 고정*/
 .main_title .main_title-hellokr,
 .main_title .main_title-helloeng,
 .main_title .main_title-hellochn {
    position: absolute;
    top:225px;
    left:50%;
    text-align: center;
    font-size: 130px;
    transform: translate(-50%, -50%);
    width: 1000px;
}
/* 스크롤 글자들 한자리에 고정, 사이즈 설정 , 가운데 고정 */
 .main_title .main_title-scrollkr,
 .main_title .main_title-scrolleng,
 .main_title .main_title-scrollchn{
    position: absolute;
    top:450px;
    left:50%;
    text-align: center;
    font-size:  70px;
    transform: translate(-50%, -50%);
    color:var(--light-grey-color);
    width: 1000px;
}

position:absolute 를 활용하여 한 위치에 고정되도록 설정하였습니다.

 .main_title .main_title-hellokr,
 .main_title .main_title-helloeng,
 .main_title .main_title-hellochn,
 .main_title .main_title-scrollkr,
 .main_title .main_title-scrolleng,
 .main_title .main_title-scrollchn{
    opacity: 0;
}

그 다음 전부 보이지 않도록 투명도를 0으로 설정하였습니다.

이제 생각한대로 한국어가 4초동안 나오고 4초동안 들어가게끔 설정하고싶어

animation : fadeinandout 4s altenate infinity;

@key frames fadeinandout {
	from {opacity : 0;}
    to {opacity : 1;}
}

이렇게 작성하여 한국어 영어 중국어에 적용했지만
한국어 영어 중국어가 섞여서 나왔습니다.

그러던중 %를 활용하는법을 알게되어
100%를 한국어 8초 영어 8초 중국어 8초를 계산하여
1%당 4%로 나눠서 주기로 결정했습니다.

/* 첫번째 한국어 애니메이션 24초로 설정 무한반복 */
 .main_title .main_title-hellokr,
 .main_title .main_title-scrollkr {
    animation: fadeinoutkr 24s infinite;
}
/* 두번째 영어 애니메이션 24초로 설정 무한반복 */
.main_title .main_title-helloeng,
.main_title .main_title-scrolleng {
   animation: fadeinouteng 24s infinite;
}
/* 세번째 중국어 애니메이션 24초로 설정 무한반복 */
.main_title .main_title-hellochn,
.main_title .main_title-scrollchn {
   animation: fadeinoutchn 24s infinite;
}
/* 24초를 4초씩 나눠 16.5%씩 할당 */
@keyframes fadeinoutkr {
    0% {opacity: 0;}
    16.5% {opacity: 1;}
    33% {opacity: 0;}
}
@keyframes fadeinouteng {
    0%, 33% {opacity: 0;}
    49.5% {opacity: 1;}
    66% {opacity: 0;}
}
@keyframes fadeinoutchn {
    0%, 66% {opacity: 0;}
    82.5% {opacity: 1;}
    100% {opacity: 0;}
}

이런식으로 주니 잘 작동 하였습니다.

첫번째 한국어 애니메이션은 33퍼까지 나왔다가 사라지도록 고정하고
두번째 영어 애니메이션은 33퍼에서 시작하여 66퍼까지 나왔다가 사라지도록 설정하였고,
세번째 중국어 애니메이션은 66퍼에서 시작하여 마지막까지 나왔다가 사라지도록 설정하였습니다.
그러고 무한 반복을위해 각 애니메이션에 infinity 속성을 주었습니다.