30. [CSS] CSS Animation - 3

안녕하세요~! 이번 포스팅에서는 이전 포스팅에서 다루었던 CSS Animation에 대해서 심화학습을 진행해보도록 하겠습니다.

 

이번 포스팅을 보시면서 [CSS Animation-1,2] 를 참고해주시면 도움이 될거에요!

https://daterminal.tistory.com/32

17. [CSS] CSS Animation - 1

https://daterminal.tistory.com/33

18. [CSS] CSS Animation - 2

---

우선 CSS 만으로는 :hover (마우스를 가져다 대면 반응함) 를 이용한 애니메이션 밖에 만들지 못합니다.

 

이전에 학습했던

transition 은 시작화면에서 서서히 결과화면으로 변경하는 속성이었습니다. 

.box{
	transition : all 1s; /*1초동안 서서히 변화*/
}

 

오늘은 조금 더 복잡한 애니메이션을 다루기 위한 CSS 속성에 대해서 학습해보겠습니다. 

복잡한 animation은 중간에 멈춘다던가, 움직이다가 갑자기 멈춘다거나 등을 뜻합니다. 

 

이를 구현하기 위해서는 transform과 @keyframes에 대한 학습이 필요합니다. 

 

1. transform 

클래스 내부에서 사용하는 속성 값으로 [변환]의 의미를 가지고 있습니다. 

transform : 변환, 애니메이션을 부여할때 많이 사용하는 속성

transform : translate(100px, 200px);
transform : scale(2); 
transform : rotate(100deg);

transform 속성값

1. rotate(deg) : 회전, 각도 회전

 

2. translate(x px , y px ) : 이동 원래 위치에서 x축 ,y축 이동 = margin과 기능은 동일 (But, 버벅인다. 브라우저 렌더링 단계 때문) 

cf) translateX, translateY도 존재 

 

3. scale (x축 몇배, y축 몇배) : 스케일링, 크기를 키워주거나 줄임

 

☞ margin 등으로 translate와 기능을 동일하게 할 수 있는데 왜 굳이 translate를 사용할까요?  

두가지 이유가 있습니다. 

 

1. 레이아웃과 상관없이 붕떠서 독립적으로 움직입니다. 

2. 브라우저 렌더링 단계 중 [Composite 단계]에 해당하기 때문에 빠르게 동작합니다. 

- margin 등은 [Layout 단계]에 해당합니다. 렌더링 시간이 필요하기 때문에 스무스하게 동작하지 않습니다.  

 

# 브라우저 렌더링 단계 

margin 은 layout 단계에 속하기 때문에 처음부터 브라우저를 다시 렌더링 해야하기 때문에 버벅이는 경우가 대다수

반면, transform은 Composite단계에 속하기 때문에 마지막만 조정하면 되기에 버벅이는 일이 없습니다. 

 

2. @keyframes 

 

@keyframes : 복잡한 애니메이션을 구현 가능하다. 마치 함수처럼 애니메이션 정의합니다. 

 몇 퍼센트에서의 애니메이션의 섬세한 동작들을 각각 정의할 수 있습니다. 

정의 후에 적용하고 싶은 곳에서 호출하면 됩니다.  

 

@keyframe 호출 방법

1. animation-name : 정의한 애니 이름

2. animation-duration : 시간

 

 

예제를 통해서 알아보겠습니다. 

버튼에 마우스를 올리면 움찔거리는 애니메이션을 부여하도록 하겠습니다. 

 

1. hover 이전

2. 오른쪽으로 15도 회전

3. 왼쪽으로 15도 회전

4. 마지막 동작 고정(왼쪽으로 15도 회전)

 

 

HTML

<div class='btn-wrap'>
    <button class='btn'>마우스를 올려보세요</button>
</div>

 

CSS 

.btn {
    display: block;
    margin: auto;
    padding : 20px; 
    background-color: deepskyblue;
    border : none; 
    border-radius: 5px;
    color : white; 
}

.btn:hover{
    animation-name : shake-btn;
    animation-duration: 1s; 
    animation-fill-mode: forwards;
}

@keyframes shake-btn{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(15deg);
    }
    75%{
        transform: rotate(-15deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.btn

: 버튼의 디자인을 관리하는 CSS 스타일링입니다. 

 

@keyframes 

: 함수처럼 애니메이션의 동작을 정의하는 구간입니다. 

%로 동작의 디테일을 결정합니다. 

 

.btn:hover 

: 선언한 애니메이션 함수 (keyframes) 를 호출하는 공간입니다. User가 버튼에 마우스를 올렸을 때 어떤 상황으로 이끌어 갈 지 keyframe을 호출합니다. 

 

  ▷animation-name : shake-btn;

: 선언한 애니메이션에 대해서 호출합니다. 

 

  ▷animation-duration: 1s; 

: 선언한 애니메이션이 몇 초에 걸쳐서 진행할 지 설정합니다. 

 

  ▷animation-fill-mode: forwards;

: 마지막 동작을 고정시키는 역할을 합니다.