animation

• animation
  • animation-name : * ; 필수. 애니메이션의 이름.
  • animation-duration : ns/nms ; 필수. 애니메이션의 진행 시간.
  • animation-delay : ns/nms ; 애니메이션의 시작 전 지연 시간.
  • animation-iteration-count : n/infinite ; 애니메이션의 반복 횟수 (무한반복은 infinite)
  • animation-direction : normal/reverse/alternate/alternate-reverse; 애니메이션의 진행 방향.
    (정방향/역방향/왕복/역방향왕복)
  • animation-timing-function : ease/ease-in/... ; 애니메이션의 가속 감속 등의 효과.
  • animation-fill-mode : none/forwards/backwards/both ; 애니메이션이 멈춘 상태일 때 보여질 장면.
• animation-play-state : running/paused;
  애니메이션 진행/멈춤

  :before 와 :after 는 태그의 앞이나 뒤에 컨텐츠를 추가하거나
    스타일을 줄 수 있다. ( content: " " ; 속성으로 지정)
    
  +는  바로 뒤에 오는 하나의 형제요소만 선택할 수 있고 
  ~ 은 뒤에 오는 모든 형제요소를 선택할 수 있다.
 

@keyframes 애니메이션 정의하기

 @keyframes * {                 ---- 임의의 이름을 지정하여 정의 시작
 
  0% (=from) { 속성 : 속성값; }    ---- 첫 장면에서의  상태 지정
     ...                        ---- n번째 장면에서의  상태 지정
     ...                                ....
 
  100% (=to) { 속성 : 속성값; }    ---- 마지막 장면에서의  상태 지정
 }