[CSS] animation과 keyframe

 

◽ animation

- frame by frame animation은 gif를 사용하면 이미지 깨짐현상 등으로 의도한대로 노출되지 않을 수 있다. 애니메이션을 CSS로 구현하면 커스텀이 쉽다.

@keyframes dot {
    0% {
      opacity: 0.2;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      opacity: 0.2;
    }
}

/* linear: 일정한 속도 */
/* alternate: 반복하기 */
/* reverse: 반대로 시작 */
/* alternate-reverse: 반대로시작해서 반복 */
/* forwards: 애니메이션이 끝난 위치에서 끝남 */
/* steps: 애니메이션을 17단계로 자름 */
.dot {
    animation: dot 1s infinite linear alternate;
    animation: dot 1s infinite linear reverse;
    animation: dot 1s infinite linear alternate-reverse;
    animation: dot 1s infinite linear forwards;
    animation: dot 1s infinite steps(17);
}

/* running: 기본값 */
/* paused: hover 시 중지된다. */
.dot:hover {
    animation-play-state: paused;
}

 

 

◽ @keyframes

@keyframes dot {
    0% {
      opacity: 0.2;
    }
    100% {
      opacity: 0.2;
    }
}

/* from: 시작 */
/* to: 끝 */
@keyframes dot {
    from {
      opacity: 0.2;
    }
    to {
      opacity: 0.2;
    }
}

 

 

 

---

 

 

 

출처

인터랙티브 웹 개발 제대로 시작하기 - 인프런 | 강의