[CSS] Animations

animation 요소는 스타일을 서시히 변화시켜주는 것을 말합니다.

CSS 속성을 원하는 만큼 많이, 원하는 만큼 여러 번 변경할 수 있습니다.

CSS Animation 을 사용하려면 먼저 Animation에 대한 몇 가지 @keyframes을 지정해야 합니다.

 

키프레임은 요소가 특정 시간에 가질 스타일을 나타냅니다. 예를 들어, 요소의 크기, 위치, 색상 등을 지정하여 특정 시간에 어떻게 보일지를 설정할 수 있습니다. 이러한 키프레임을 사용하여 요소의 애니메이션을 만들 수 있으며, 이를 이용하여 요소가 부드럽게 움직이거나 변화하는 효과를 줄 수 있습니다.

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-timing-function
• animation-fill-mode
• animation

---

@keyframes 규칙

@keyframes안에 CSS 스타일을 나열할 때, animation은 현재 스타일에서 새로은 새로운 스타일로 특정 시간에 서서히 변할 것입니다.

그렇게 동작하기 위해서는 요소에 animation을 바인딩 해야하는데요.

4초동안 빨간색이었던 박스가 서서히 노란색으로 바뀌었다가 4초가 된 시점에서 다시 빨간색으로 돌아옵니다.

참고: `animation-duration`속성은 애니메이션이 완료되기까지 걸리는 시간을 정의합니다. 만약 `animation-durationg`을 명시하지 않는다면, default로 0이 세팅되어 animation은 발생하지 않습니다.

 

위 예에서 키워드 "from"과 "to"를 사용해 스타일을 변화시킬 수 있었습니다.

퍼센트로도 가능합니다. 퍼센트를 사용함으로써 우리가 원하는 많은 스타일 추가할 수 있습니다.

red에서 시작해서 1s에는 yellow, 2s에는 blue, 3s에는 blue, 4s에는 green이 되고 4초가 지나면(100%) 다시 red가 됩니다.

---

animation-delay

animation을 지연시킵니다.

2s가 지나면 anmation이 시작됩니다.

음수 값도 허용됩니다. 음수 값이 사용되는 경우는 animation이 이미 N초 동안 실행되었던 것처럼 시작합니다.

여기에서 테스트 해보세요~ 눈으로 봐야 이해가 되는거 같네요.

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_delay2 

W3Schools online HTML editor

---

animation-iteration-count

몇 번 animation을 반복할지를 나타냅니다.

example animation을 3번 반복합니다.

`infinite`는 animation을 영원히 반복하도록 합니다.

---

animation-direction

animation을 정방향, 역방향 또는 번갈아 가며 재생해야하는지 여부를 지정합니다.

• normal(기본값): animation을 정방향 재생합니다.
• reverse: animation을 역방향 재생합니다.
• alternate: animation 정방향으로 재생한 다음 역방향으로 재생합니다.
• alternamte-reverse: animation을 역방향으로 재생한 다음 정방향으로 재생합니다. 

---

animation-timing-function

animation으 속도 곡선을 나타냅니다.

• ease(기본값): 느림 → 빠름 → 느림
• linear: 일정한 속도
• ease-in: 느린 시작
• ease-out: 느린 끝
• ease-in-out: 느린 시작과 끝
• cubic-bezier: 사용자 지정

---

animation-fill-mode

첫 번째 키프레임이 실행되기 전이나 마지막 키프레임이 실행된 후에는 해당 요소에 영향을 주지 않습니다. 그러나 animation-fill-mode 속성은 이러한 동작을 무시하도록 지정할 수 있습니다.

animation-fill-mode 속성은 애니메이션이 실행되지 않을 때 (시작하기 전, 끝나고 난 후 또는 둘 다 ) 대상 요소에 대한 스타일을 지정합니다.

animation-fill-mode 속성은 다음과 같은 값이 가능합니다.

• none(기본값): animation은 실행되기 전이나 실행 된 후에 해당 요소에 스타일을 적용하지 않습니다.
• forword: 요소는 마지막 키프레임에 설정된 스타일을 유지합니다.(animation-direction 및 animation-iteration-count)에 따라 달라집니다)
• backwords: 요소는 첫 번째 키프레임에서 설정된 스타일을 가져오며 애니메이션 지연 기간 동안 이 스타일 값을 유지합니다. 
• both: 애니메이션은 앞뒤로 모두 적용되며, forwords와 backwords 규칙이 모두 적용됩니다.

---

Animation 속성 나열

 

Animation 속성 축약