자동으로 움직이는 애니메이션 효과 만들기

• animation 속성으로 미리 지정한 조건에 맞게 자동으로 반복
  
  • @keyframes : 애니메이션의 시작과 끝을 등록하여 사용자 모션등록
    1. 0%는 시작지점, 100%는 끝지점
    2. 중간 지점은 여러개 추가 가능
    3. 단계별로 동작 방식을 지정해서 특정 이름을 붙여 키프레임 등록가능
  • animation-name : 키프레임으로 등록한 모션 이름 호출
  • animation-duration : 키프레임 모션 한 세트를 얼마동안 동작하게 할지 초 단위로 등록
  • animation-timing-function : 키프레임 모션을 실행할때 가속도 설정(transition 속성과 같음)
  • animation-iteration-count : 키프레임 모션 한 세트가 동작 회수 설정
  • animation-delay : 키프레임 모션을 실행할 때 지연 시간
  • animation-paly-state : 키프레임 모션을 실행할 때 동작 상태 지정
  • animation : 애니메이션 속성을 축약 가능

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.