CSS Animation

애니메이션 중간중간 방향 또는 크기 등과같은 변화가 있는 지점을 keyframes라고 한다.

<style>
    .ball {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: coral;

        animation: ball-ani 2s;
    }

    /* animation: 축약형, 단축형, 속기형 등으로 부른다. 줄여서 쓰는 형태로, 애니메이션의 모든 속성을 한꺼번에 지정 가능 */
    /* animation-name: 애니메이션의 이름 */
    /* animation-duration: 애니메이션이 재생(지속)되는 시간 */
    /* animation-delay: 애니메이션의 재생이 시작되기 전 대기 시간 */
    /* animation-timing-function: 애니메이션의 가속, 감속을 조정해서 애니메이션 느낌을 다르게 */
    /* animation-iteration-count: 애니메이션의 반복 횟수 */
    /* animation-direction: 애니메이션의 재생 방향 normal, reverse, alternate, alternate-reverse */
    /* animation-play-state: 애니메이션의 재생, 정지 상태 running, paused */
    /* animation-fill-mode: 애니메이션이 재생되지 않는 동안의 스타일을 지정 none, forwards, backwards, both */
    @keyframes ball-ani {
        0% {
            transform: translateX(0) scale(1);
        }

        100% {
            transform: translateX(200px) scale(1.5);
        }
    }
</style>

animation 동작 중 hover가일어나면 동작 멈춤 

.ball:hover {
	animation-play-state: paused;
}

Animation Event

- animationstart

- animationend

- animationiteration

- animationcancel

<script>
   const ball = document.querySelector('.ball');
    const message = document.querySelector('.message');

    ball.addEventListener('animationstart', e => {
        console.log(`${e.animationName} START`);
        message.innerText = 'START';
    });
</script>

애니메이션 과정

요소를 브라우저에 그리기위해 계산된 결과를 가지고 레이아웃 구성

이때 이 요소가 레이어가될지 그냥 계산을 통해 움직임을 줄건지 결정된다.

transform, opacity는 보통 레이어로 작동된다. 하지만 top, left, width, border, background 등과 같은 요소는 레이어가 아니어서 움직일때마다 재계산이 필요하다.

레이아웃이 구성된 후 페인트 된다.