1.animation & @keyframes

animation과 @keyframes를 통해 움직이는 효과를 줄 수 있다

2.animation & @keyframes속성

2-1. animation: 애니메이션을 제어하는 부분

• animation-name : 만들어줄 애니메이션의 이름 입력

• animation-duration : 만들어줄 애니메이션의 지속시간(.2s)

• animation-timing-function : 만들어줄 애니메이션이 움직이는 속도
  (ease: 기본값 느리게-빠르게-느리게 linear:느리게 steps(숫자):쪼갠 수대로)

• animation-delay : 만들어줄 애니메이션의 지연시간

• animation-iteration-count : 만들어줄 애니메이션의 반복

• animation-direction : 만들어줄 애니메이션의 방향
  (normal:기본값,정방향 reverse:역방향 alternate:왕복)

• animation-play-state : 만들어줄 애니메이션의 재생,멈춤
  (running:기본값,재생중 paused:멈춤 주로 해당 태그를 :hover시 사용)

• animation-fill-mode: 만들어줄 애니메이션의 시작 또는 종료지점의 위치지정
  (none:기본값 forwards: backwards: both:forwards+backwards)

  none
  

  2번반복 후 처음 있어던 자리에서 종료됨

  forwards
  

  2번반복 후 100% 위치에서 종료됨

  backwards
  

  0%에서 시작

  both
  

  0%에서 시작해 100%에서 종료

2-2.@keyframes: 애니메이션을 직접 만드는 부분

@keyframes 이름 {from~to}

0(from)~100%(to)까지의 행동을 적어주면 된다