TIL : CSS animation 끝난 상태 유지, animation 더 좋게 만드는 법 will-change

animation-fill-mode

forwards대상은 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지.

그리고 display: none; 으로 해버리면 그대로 남아있어 터치가 안되므로 visibility: hidden; 을 줘야함

animation: splash-display 2s ease-in-out forwards;

@keyframes splash-display {

  from {

    opacity: 1;

  }

  to {

    opacity: 0;

    visibility: hidden;

  }

}

 

developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode

 

animation-fill-mode

 

 

will-change

@keyframes icon-heart-move {  
  0% {
    transform: none;
    color: white;
  }  50% {
    transform: scale(1.3); <-스케일이 작은 값일 때 흔들리곤 하는데 그럴때 브라우저에게 렌더링 힌트를 줌
    color: red;
  }  100% { 
   transform: none;
    color: white; 
  }
}

.open-chat__contents__column-img-heart:hover i {
  will-change: transform;
  animation: icon-heart-move 1s ease-in-out infinite;
}

그래픽 카드를 이용해 애니메이션 가속화.

흔들림이 줄어든다고는 하는데 너무 미묘한 차이여서인지 나는 잘 인지를 못하겠음. 흠...?

 

developer.mozilla.org/en-US/docs/Web/CSS/will-change

will-change