css - animation

css의 꽃!! animation을 정리해보쟈!!!

📌animation

animation은 transition과 비슷하게 다수의 스타일을 전환하는 애니메이션을 적용한다.

  animation: doyi_bg 4.5s cubic-bezier(0.645, 0.045, 0.355, 1) 4s 1;

 

단축형식 : name | duration | timing-function | delay | iteration-count | direction 

• name 은 필수 값이다.
• 순서들은 크게 상관 없으나, duration 과 delay 순서는 맞춰야 한다.

@keyframes doyi_bg {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

}

transition과 다른점 

• 사용자의 action 이 없어도 자동으로 동작하게 만들 수 있다.
• 한가지의 상태로만 변환되는 것이 아니라 여러 상태를 거치며 변환시킬 수 있다.

 

📌@keyframes

 animation 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다.

• 시간에 따라 변환되므로 % 를 사용해 중간 지점들에 속성을 넣는다.  -> 동일한 % 값이 여러번 입력될 경우 Cascading 법칙에 따라 아래쪽 속성만 적용됨을 주의!
• 키프레임은 순서대로 나열 가능하며, 지정된 % 의 순서대로 처리된다.
• 최소한 from / to 혹은 0% / 100% 같은 시간에 대한 규칙은 포함해야 한다.
• 작성된 키프레임 이름은 여러 요소에서 애니메이션으로 사용될 수 있다.

 

📌animation-name

 @keyframes 에 선언된 애니메이션 이름을 호출해 적용할 수 있게 해준다.

 

📌animation-duration

애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정한다.

• 시간값은 양수 또는 0이어야하며 단위(s, ms) 는 필수이다.
  -> 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타낸다.

 

📌animation-timing-function

애니메이션의 진행 방식을 지정한다.

• transition 의 timing-function 과 사용되는 값들도 동일하다.
• 기본값은 ease 키워드값이다.

 

📌animation-delay

애니메이션이 시작할 시점을 지정한다.

• 양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타낸다.
• 음수 값은 애니메이션이 즉시 시작되지만 애니메이션 주기의 중간에서부터 시작된다.
  ex) animation-delay: -1s = 애니메이션 1초 이후 시점에서부터 시작된다.

 

📌animation-iteration-count

애니메이션의 사이클 반복 횟수를 지정한다.

• 기본값은 1이다.
• 숫자로도 설정할 수 있고, infinite 값을 사용하여 무한 반복할수도 있다.

 

📌animation-direction

애니메이션이 정방향, 역방향 또는 앞뒤로 번갈아 재생되는지 여부를 지정한다.

• noraml : 정방향 재생 (기본값)
• reverse : 역재생 -> 애니메이션 반대로, 타이밍 기능 반대로
• alternate : 시작-종료 반복 재생 -> 왔다갔다
• alternate-reverse : alternate 에서 첫 시작을 반대로

 

📌animation-play-state

애니메이션의 동작 상태 여부를 지정한다.

• running : 애니메이션이 현재 재생중임을 나타낸다.
• paused : 애니메이션이 현재 일시 정지중임을 나타낸다.

 

📌animation-fill-mode

애니메이션의 실행 전/후에 대상에 스타일을 적용하는 방법을 지정한다.

• forwards : 실행된 애니메이션의 마지막 keyframe 에 의해 설정된 스타일값을 유지한다.
• backwards : delay 가 일어나는 동안 keyframe 에 의해 설정된 시작 스타일값을 적용시킨다.
• none : 애니메이션 시작 전 요소에 할당된 스타일을 그대로 유지한다. (기본값)
• both : forwards & backwards 가 동시에 적용된다.