• Transition과 Animation의 가장 큰 차이점 = keyframe 유무

---

timing-function

• Animation은 Transtion와 같이 timing-func은 ease가 default

@keyframes sample-ani {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(500px, 0);
        background-color: red;
    }
    100% {

        transform: translate(600px, 200px); 
    }
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    background-color: #fff000;
    animation: sample-ani 2s ease infinite;
}

animation-direction

animation-direction : alternate, reverse

alternate-reverse도 가능! reverse된 상태로 alternate

animation: sample-ani 3s ease infinite alternate;

---

animation-fill-mode

기본값은 none
forwards = 애니메이션 종료 지점 100%에 두기

---

animation-play-state

기본값은 running
애니메이션 paused or not

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

---

이미지 스프라이트 기법 (frame-by-frame)

• 이미지 사이즈 w - 5100px, h : 150px

.spaceship {
    width: 150px;
    height: 150px;
    background: url('../images/sprite_spaceship.png') no-repeat 0 0 / auto 150px;
    /* 5100px 300px */
    /* 지금의 경우, cover 가능 */
    animation: spaceship-ani s infinite steps(17) reverse;
}

background

background-size는 /로 구분해주면 된다 =>

background: url('image.png') no-repeat 0 0 / auto 150px; }

이미지 자동으로 비율 맞춰주기 (나누기 쉬운거 하나만 2로 나누고 => auto )
auto 150px

---

steps( n 번 )

• animation 속성 중 하나

---

@keyframes

• 초기 CSS 세팅과 변화가 없을시 0% 안적어줘도 됨

@keyframes spaceship-ani {
    to { /* from ~ to, 0% ~ 100%*/
        background-position: -2550px 0;
    }
}

• -2550px 0 인 이유 = left 방향으로 흘러가듯이 이동
• 5100px이 아닌 이유 = bg-size를 처음에 auto 150px로 반띵 비율로 설정했기 때문

---

gif 두고 왜 frameByFrame?

• gif는 알파 채널(Alpha Channel), 즉 투명도가 적용이 안된다는 치명적 단점이 있음

• 도트 찍어서 표현한 픽셀 아트가 아닌 이상, 이미지 가장자리가 깨진 것처럼 보임 (안티 앨리어싱 ❌)

• cf. 반면, png는 알파채널이 적용되는 이미지 (apng도 있지만 지원 안하는 브라우저 많음)

알파 채널(Alpha Channel) = 알파채널(Alpha Channel)은 RGB채널에 저장되는 RGB값 이외의 데이터를 저장할 수 있는 채널

안티 앨리어싱(Anti-Aliasing) = 높은 해상도의 신호를 낮은 해상도에서 나타낼 때 생기는 계단 현상(깨진 패턴)을 최소화하는 방법 (출처 : 위키백과)

• 또 다른 장점 : reverse, duration 등 마음대로 조정 가능