23.6.9-6.10 TIL

김진주·2023년 6월 10일

TIL animation transform transition

TJL(Today Jinju Learned)

목록 보기

11/35

node.js degit을 활용해서 원하는 폴더만 깃 레포에서 가져오는 법

📌 웹카페를 만들면서 배우는 CSS

🏷️transition을 활용하여 만든 메뉴 슬라이딩 애니메이션

트랜지션 선언하는 방법

 transition-property: background, border-radius;
 transition-duration: 3s, 3s;
 transition-delay: 3s, 0s; 
 /* 단축 속성 */
 transition: background 3s 3s, border-radius 3s 0s;

 /* 모바일 메인 메뉴 */
  .menu__list {
    background: var(--accent-opacity-color);
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 70%;
    height: 100vh;
    /* 뒤에 비치는 배경 값을 조절해줌 */
    backdrop-filter: blur(4px);
    padding: var(--spacing-lg);
    transform: translateX(-150%);
    transition: all 400ms;
  }
/* is--active 라는 자바스크립트가 작동하면 x축으로 -150%만큼 움직였던 메뉴 리스트가 나타남 */
  .is--active .menu__list {
    transform: none;
  }

🤔 문자를 옮겼을 때 스크롤바가 생기는 문제가 생긴다

✅ <p>를 display: block로 선언해줬기 때문이다 그럼 inline으로 선언하면 되지 않냐라고 생각할 수도 있지만 inline을 사용한다면 애니메이션이 적용되지 않는다.

🤔 그럼 어떤 값을 사용해야 하는가?

✅ inline-block을 사용하면 된다. 인라인처럼 보이지만 블록처럼 행동하는 요소이다.
그럼 width을 주지 않으면 안에 있는 텍스트 크기에 길이가 맞춰지지만 inline에는 불가능한 width와 height 값을 줄 수 있다.
정상적으로 보여진다

🏷️@keyframe을 활용한 애니메이션

/* keyframe 선언 */
@keyframes moveEffect {
  0% {
    background: yellow;
    transform: translate(0, 0);
  }
  100% {
     background: pink;
    transform: translate(400px, 75px );
  }
}

.visual {
  border: 1px  solid green;
  width: 940px;
  height: 120px;
  margin: 0  auto;
}

.visual-text {
  display: inline-block;
  /* name과 duration은 필수 값 */
  /* moveEffect라는 keyframe이 3초동안 동작 후 유지 */
  animation-name: moveEffect;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

🧷 활용예제

 @keyframes fadeEffect {
   0% {
     opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }

.visual::before,
.visual::after {
  animation-name: fadeEffect;
  animation-duration: 2s;
  /* 반복 횟수를 지정할 수 있음 */
  animation-iteration-count: infinite;
  /* 꺼졌다 켜졌다를 자연스럽게 도와줌 */
  animation-direction: alternate;
}

.visual::before {
  background: url(./../assets/ani_flower_01.png) no-repeat 0 0,
    url(./../assets/ani_flower_02.png) no-repeat 800px 10px;
}

.visual::after {
  background: url(./../assets/ani_flower_03.png) no-repeat 300px 15px,
    url(./../assets/ani_flower_04.png) no-repeat 670px 10px;
  animation-delay: 1s; 
}

1초 간격으로 꽃들의 이미지가 교차로 나타났다 사라지는 애니메이션

🧷 애니메이션 reflow

리플로우(Reflow) 는 요소의 크기, 위치, 레이아웃 등의 변경으로 인해 발생하는 문서의 재배치를 말한다. 리플로우를 유발하는 요소들을 많이 사용하면 성능에 영향을 미치기 때문에 최소화 해야 한다.

🤔 이런 리플로우를 일으키는 상황은 무엇일까?

└── 너비(width), 높이(height), 패딩(padding), 여백(margin) 등의 속성이 변경될 경우 리플로우 발생
│
└── 위치와 관련된 속성인 top, left, right, bottom 등이 변경되면 리플로우가 발생
│
└── 요소의 추가, 삭제, 숨김, 보임 등의 변경은 리플로우를 유발
│
└── 텍스트 내용이 추가, 삭제, 변경되면 리플로우가 발생
│
└── 브라우저 창의 크기가 변경되면 모든 요소의 리플로우가 발생

✅ 애니메이션에서 리플로우를 최소화하기 위해 다음과 같은 접근 방법을 고려


└── 트랜스폼(Transform) 사용: 
|	애니메이션에 트랜스폼 속성(scale, translate, rotate 등)을 활용하면 
|   리플로우 없이 GPU 가속을 통해 애니메이션을 처리할 수 있음
|
└── 트랜지션(Transition) 사용:
|	트랜지션을 사용하여 속성의 변화를 부드럽게 처리하면 리플로우를 최소화할 수 있음
|
└── 애니메이션 그룹화:
|	여러 요소의 애니메이션을 하나의 CSS 애니메이션으로 그룹화하여 한 번의 리플로우만 발생시킴
|
└── 애니메이션 중 변경이 필요한 속성 최적화:
|	애니메이션 중에는 가능한 한 변경이 필요한 속성을 제한하여 리플로우를 줄일 수 있음
|
└── 애니메이션 요소에 포지션 고정:
    애니메이션을 적용하는 요소에 position: fixed 또는 `position:absolute 사용

23.6.10 TIL

.login-form-container {
  background: yellow;
  display: flex;
  flex-flow: row wrap;
}
.user-email,
.user-password,
.login-state-ip-security-checkbox-wrapper,
.btn-login {
  width: 100%;
}