CSS 기본 문법 실습 따라해보기 - animation (3)

 

CSS 기본부터 적용하기

 

1. animaion

- 구간 A, B, C, D 등 다양하게 있어도 된다.

- animation 적용하려면 @keyframes를 만들어서 사용해야 한다.

ex) @keyframes 이름 및 구간 정한 후, 사용 (0%와 100%는 기본값이므로 따로 지정하지 않아도 된다.)

      ※ 0%와 100%는 애니메이션이 적용되어 변경된 모습에서 다시 기존 모습으로 돌아오게 하는 법

 

ex) 기존 모습으로 돌아오게 하는 법은 한 가지가 더 있음 alternate 이용 (to-from도 같이 사용해야 적용이 된다.)

 

ex) 마우스 hover 했을 때만 애니메이션을 적용하고 싶을 때는 animation을 button:hover에 지정하면 된다.

 

ex) button 3개 만들어서 animation 연습해 보기

 

 

2. animation-iteration-count

- infinite 말고, 적용 횟수를 지정할 수 있다.

ex) 3회 반복 적용

 

 

3. animation-direction 

- animation 방향을 reverse를 지정해서 역방향으로 설정할 수 있다.

ex) animation 속성을 모두 사용해 보자

 

 

4. animation-play-state

- paused(멈춤)와 running(작동) 2가지 

ex) paused와 running 2가지를 마우스 호버에 적용해서 사용해 보자

 

 

5. animation-fill-mode

- animation 진행 단계는 총 5단계 (기존 스타일에서 시작 - 0% - 50% - 100% - 기존 스타일로 다시 돌아옴)

- forwards : 100%까지 애니를 끝낸 후, 기존 스타일로 돌아오지 않음 (즉, 어디서 끝낼 건지)

- backwards : 기존 스타일부터 시작하지 않고, 0%부터 시작함 (즉, 어디서 시작할 건지)

- both : 둘 다 적용

ex) (border 색 보기) : backwards만 적용 --> forwards 적용 --> both 적용 --> 모두 적용하지 않을 때