28일차 - CSS 키프레임 애니메이션

• 피그마 사용법
• AOS 플러그인 튜닝 가능!

키프레임 시나리오

1. 중앙에서 검정선이 옆으로 1초 동안 서서히 나타난다
2. 이 선을 기준으로 타이틀 글자가 위로 서서히 올라가고,
   작은 타이틀 글자가 아래로 서서히 나타난다 (animate)

---

1. 에밋 구조 생각하기 (태그 몇 개?)

.aniBox.gixobj>.bigTitle+.blackLine+.subTitle
.aniBox.fixobj>.bigTitle.ofh(오버플로우히든)>p{큰글자위로서서히}^.blackLine+.subTitle.ofh>p{작은글자위로서서히}

2. CSS 키프레임 시나리오

2-1. 화면 꽉 채우기

2-2. 글자 사이 blackline 삽입

"마지막 프레임을 생각하며 CSS 짜기"

• 1번 프레임 : 중앙에서 검정선이 옆으로 1초 동안 서서히
• 마지막 프레임 : 나타난다!
  

2-3. 글자 사이즈 변경

2-4. 가운데 정렬

• .blackline { width: 100% }
  부모 사이즈에 맞추겠다! 근데 부모인 .fixobj에 width 없음
• .fixobj { position: absolute }
  width 없음(=자식들에게 맞추겠다) 근데 자식인 .blackline 너비값 없음. 어쩔?
  글자 너비에 맞춘다!(= p태그 사이즈만큼!!!)

<style>

  .fixobj{
      position: absolute; /* width 없음(=자식들에게 맞추겠다) */
     				/* 근데 자식인 .blackline 너비값 없음. 어쩔? */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
	}
	.blackline{
		height: 5px;
		width: 100%; /* 부모 사이즈에 맞추겠다 */
        			 /* 근데 부모인 .fixobj에 width 없음 */            
		background-color: black;
    }
            
</style>

+) line-height & 마진-바텀: 1rem

---

3. 애니메이션

3-1. overflow: hidden

3-2. position: relative

Q) 움직임을 주는 것, position: rel? 아니면 transform?
A) transform 써서 움직이면 안된다!! (스와이퍼 등 플러그인이 쓰고있기 때문에)

3-3. 키프레임 삽입

3-4. 중앙선 기준 타이틀 글자가 올라오는 키프레임

3-4-1) 애니메이션 시작/중간/끝 별로 큰글자의 각 위치 지정

3-4-2) 애니메이션 효과 지정

3-5.중앙에서 검정선이 옆으로 나타나는 키프레임

<style>

	@keyframes blackline {
		%{
			width: 0;
		}
		/* 50%{
			width: 110%;
		} */
		100%{
			width: 100%;
		}
	}

</style>

+) 중앙선 기준 타이틀 글자가 내려오는 subTitleani 키프레임

<style>

        .subTitle p{ font-size: 20px; line-height: 1; margin-top: 1rem;
        
            position: relative; bottom: 50px;

            animation-name: subTextani;
            animation-duration: 1s;
            animation-delay: 0.3s;
            animation-fill-mode: forwards;
        }
        
        @keyframes subTextani{
            0%{
                bottom: 50px;
            }
            50%{
                bottom: -10px;
            }
            100%{
                bottom: 0px;
            }
        }

</style>