CSS 애니메이션은 element에 적용되는 CSS스타일을 다른 CSS스타일로 부드럽게 전환시켜준다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

js에도 애니메이션이 있는데 몇 가지 차이점이 있다.

css animation

외부 라이브러리X

직관적

미디어쿼리를 통한 반응형 애니메이션

메인이 아닌 별도의 Compositor 스레드에서 그려짐

js 애니메이션보다 부드러움

js animation

css보다 복잡하고 무거운 애니메이션 작업을 처리

외부 라이브러리로 성능 좋은 애니메이션 구현

60프레임 유지가 안되기 때문에 RAF(Request Animation Frame : 성능 최적화, 반복 제한)사용

1. Transform

rotate, scale

<style>
  .transition{
  	transform: rotate(45deg);
    transform: scale(2, 1);
    }
</style>

rotate : 입력한 각도만큼 회전한다.

scale : 가로, 세로로 비율만큼 확대

skew, translade

<style>
.transition {
  transform:skew(10deg, 20deg);
  transform:translate(100px,200px);
}
</style>

skew : x, y를 입력 각도만큼 돌림

translate : 선택한 오브젝트의 좌표 변경

vendor prefix

<style>.transition {
  -webkit-transform:translate(100px,200px);
  -moz-transform:translate(100px,200px); /*Firefox*/
  -ms-transform:translate(100px,200px); /*IE Edge*/
  -o-transform:translate(100px,200px); /*Opera*/
}
</style>

브라우저별로 지원하는 CSS스타일의 범위가 다르다. 때문에 vendor prefix를 설정하면 이전 버전의 웹브라우저에서도 잘 보이긴 한다. 하지만! 위에도 보이듯이 코드가 굉장히 지저분해진다. 이때 -prefix-free등의 오픈소스를 적용해주면 자동으로 추가된다고 한다. 👉적용법

2. Transition

property, duration

<style>
  .transition{
    transition-property:width;
    transition-duration:2s;
  }
</style>

property : 효과를 적용하고자 하는 css속성(color, width 등)

duration : 효과가 나타나는데 걸리는 시간

timing-function, delay

<style>
  .transition{
    transition-timing-function:linear;
	transition-delay:1s;}
</style>

timing-function : 효과의 속도를 지정(linear, ease, steps 등)

delay : 효과 전 대기 시간

<style>
  .transition{
    transition: width 2s linear 1s;
  }
</style>

이러한 속성들은 border처럼 모두 한 줄에 적을 수 있다. 단! 초는 앞에 오는게 무조건 duration을 나타내고 하나만 쓰여도 duration을 나타낸다.

가상 선택자:hover

<style>
  .transition:hover{
    width:300px;
  }
</style>

css에서 미리 만들어둔 클래스이다. hover는 마우스를 올렸을 때라는 조건이다.

3. Animation

<style>
.box1 {
    animation-name: rotation;	/*이름 지정 아래 @keyframs에서 쓰임*/
    animation-duration: 1s;		
    animation-timing-function: linear;
    animation-iteration-count: infinite;	/*애니메이션 반복 횟수*/
    animation-direction: alternate;		/*애니메이션 반복 방향*/
    animation: rotation 1s linear infinite alternate; /*한 줄로 가능*/
}

@keyframes rotation { 		/*애니메이션 동작 프레임 from 은 시작 to는 끝이다*/
    from{					
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(20deg);
    }
    to{
        transform: rotate(10deg);
    }
}
</style>

4. Apply Animation

Transform 과 Animation 같이 쓰기

.box1 {
    width:300px;height:300px; background-color:blue;
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from{
        transform: rotate(-90deg);
    }
    to{
        transform: rotate(90deg);
    }
}