[CSS]애니메이션 효과 주기

keyframe,transition 같은 속성들을 이용해서 애니메이션 효과를 줄 수 있다

 

ex)메뉴판 나타나기, 마우스 올리면 button 움직이기

/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;

진짜 많다..

 

 

animation-duration (CSS 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정)으로 지속시간 설정

/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;

 animation-name : 움찔움찔;
  animation-duration : 1s;
  animation-timing-function : linear; /*베지어 주기*/
  animation-delay : 1s; /*시작 전 딜레이*/
  animation-iteration-count : 3; /*몇회 반복할것인가*/
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards
  
  /*위 설명 출처는 코딩애플*/

 

아래는 예제!

@keyframes 왔다갔다 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(100px);
  }
}

margin으로도 줄 수 있지만 transform을 이용하는 이유는

 

1. 호환성이 좋다.

2, 변경이 빠르다.

---

웹브라우저는 HTML CSS코드를 그래픽으로 바꿔주는 간단한 프로그램.

 

순서는 아래와 같다.

 

1. Render Tree 생성 (CSS정리한 Reference)

2.  Layout 잡기 (위치 생성 / width, margin 등)

3.  Paint (픽셀에 색상 적용/ background-color)

4.  Composite ( transform, opacity가 있다면, 이때 처리함)

 

위와 같은 순서때문에 margin보다 transform이 더 빠른이유!! 처리하는 단계가 가장 마지막이니까 걸리는 시간이 적음.

그리고 transform은 다른 쓰레드에서 작업 함.

---

이 외에도 애니메이션이 버벅거린다면

.box {
  will-change: transform;
}

위의 속성을 쓴다.  바뀔 내용을 미리 렌더링해주는 속성임

.box {
  transform: translate3d(0, 0, 0);
}

위의 속성은 GPU를 사용하여 연산하게 되어 only CPU사용으로인한 부담을 덜어준다.

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

https://developer.mozilla.org/ko/docs/Web/CSS/animation-duration