CSS Keywords

{object_name}

CSS Animation Module

  • Direction

    • alternate

      키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한 후 이어서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.

    • alternate-reverse

      키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 애니메이션을 실행한 후 시작 키프레임에서 마지막 키프레임으로 역방향으로 애니메이션을 실행한다.

    • normal

      키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.

  • Easing Functions

    • ease

      천천히 시작하여 빠르게 가속한 후 천천히 종료한다.

    • ease-in

      천천히 시작하여 끝까지 가속한 다음 종료 시점에 갑자기 중지한다.

    • ease-in-out

      천천히 시작하여 가속했다가 끝으로 갈수록 느려진다.

    • ease-out

      갑자기 빠르게 시작했다가 천천히 종료한다.

  • Fill Modes

    • backwards

      웹페이지의 로드가 완료되면 선택자에 적용한 기본 style이 아닌 애니메이션 첫 키프레임의 style을 갖게 되며 애니메이션이 끝나면 선택자에 지정한 기본 style로 복귀한다.

    • both

      웹페이지의 로드가 완료되면 첫 번째 키프레임의 style을 갖게 되며 애니메이션이 끝나면 마지막 키프레임의 style을 유지한다.

    • forwards

      애니메이션 시작 전까지는 선택자에 설정한 style로 대기하고 애니메이션이 끝나면 마지막 키프레임에서 설정한 style을 유지한다.

    • none

      애니메이션 시작 전까지 선택자에 설정한 style 가지고 대기하고 애니메이션이 끝나면 다시 선택자에 지정한 style로 돌아간다.

  • Iteration Count

  • Keyframe Name

    • none

      애니메이션으로 설정한 키프레임 셋을 제거한다.

  • Keyframe Selectors

    • from

      0%에 해당하는 <keyframe-selector>이다.

    • to

      100%에 해당하는 <keyframe-selector>이다.

  • Play State

    • paused

      애니메이션 동작을 일시 정지 시킨다.

    • running

      기본값으로 애니메이션을 실행한다.

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com