[CSS] animation 애니메이션

animation

스스로 움직임을 가지는 값

 

• animation-name : 애니메이션 이름
• animation-duration : 애니메이션 시간
• animation-delay : 대기 시간
• animation-timing-function : 움직임 스타일
• animation-iteration-count: 반복 횟수
  • infinite : 무한
  • 숫자값 : 값만큼 반복
• animation-fill-mode : 종료 후 행동 지정
  • backwards : (기본값)끝난 후 출발점으로 돌아감
  • forwards : 끝난 후 종료점에서 멈춤.
• animation-direction : 진행 방향
  • normal : (기본값)
  • reverse : 역방향 ( 방향이 바뀌는 게 아니라 진행 순서가 to -> from 으로 진행)
  • alternate : 순방향 진행 후 역방향 진행 1>2>3>2>1
  • alternate-reverse : 역방향 진행 후 순방향 3>2>1>2>3
• animation-play-state : 애니메이션 정지 / 실행
  • paused : 일시 정지
  • running : 실행

---

from에서 시작해서 to에서 끝나며 요소의 기본 값과 시작의 값이 다르면 애니메이션이 튀어보일 수 있음.

---

from == 0% to == 100% 와 같이 %로도 작성할 수 있으며 0% == from의 값은 생략 가능.

(생략하게 되면 요소의 기본값에서 시작하게 된다.)

---

%로 작성하면 특정 구간을 세밀하게 조정할 수 있음 (ex. 30% -> 50% -> 70% -> 100% ...)

---

animation 축약형

순서와 상관 없이 한 줄로 작성. 대신 숫자는 앞에 작성하면 진행시간, 뒤에 작성하면 대기 시간이 됨.

 

      animation-name: move1;
      animation-duration: 3s;
      animation-timing-function: cubic-bezier(.95,-0.41,.15,1.34);
      animation-delay: .5s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      
      ==

      animation: move1 3s .5s cubic-bezier(.95,-0.41,.15,1.34) infinite alternate;