animation

animation

transition 보다 더 세밀하게 움직이는 효과를 만져줄 수 있다.

하지만 더욱 세밀한 제어가 필요한 애니메이션은 자바스크립트로 하고,

가벼운 애니메이션은 css 애니메이션을 활용.

@keyframes 를 통해서!

@keyframes box { 0% { top: 20px; } 50% { top: 80px; } 100% { top: 140px; } }

예로 %를 활용해서 0% ~ 100% 까지 세밀하게 효과를 제어해준다.

사이에 쪼개서 사이 숫자로 % 를 주어 더 세밀하게 제어한다.

다른 방법도 있다.

@keyframes opacity { from { opacity: 1; } to { opacity: .5; color: black; background: blueviolet; } }

from 어디로부터 to 어디까지로 세밀한 제어가 가능하다. ( * 이 사이에 숫자로 50% 를 넣어줘서 유연하게 효과를 줄 수도 있음. )

+ 그리고 애니메이션 이름 여러 개 설정 가능해서 각각 키프레임마다 애니메이션 설정한 거 불러와서 효과 주면 됨.

* 주요한 애니메이션 속성 중에 몰랐던 것만 정리.

1. 얼마나 반복할 건지 infinite 는 무한반복이고 숫자로 몇회 반복할건지 설정해주면 됨.

animation-iteration-count: infinite;

2. 애니메이션 진행방향

animation-direction: normal; animation-direction: reverse; animation-direction: alternate-reverse; animation-direction: alternate;

위에서부터 순서대로 -> 0% 에서 100% 로 기본값. / 역방향 / 역왕복 / 왕복

3. 애니메이션 채우는 방법. ( 요소에 적용된 처음 스타일에서 각각의 속성 값에 따른 변화 양상. )

animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both;

none : 처음 스타일 -> 0% -> 100% -> 처음 스타일 (* 처음에서 효과 주고 다시 처음으로 )

forwards : 처음 스타일 -> 0% -> 100% -> 100% (* 처음에서 효과 주더니 전진한다 라고 이해하기. )

backwards : 0% -> 0% -> 100% -> 처음 스타일 (* 0에서 효과 주더니 처음으로 택한다. )

both : 0% -> 0% -> 100% -> 100% (* 0에서 효과 주더니 100으로 이게 제일 자연스러운 듯. )

4. 애니메이션 재생 상태 ( 주로 자바스크립트로 이벤트에 따라 제어됨. )

animation-play-state: paused; animation-play-state: running;

running 실행상태가 디폴트 값.

* 애니메이션 단축 프로퍼티

animation: name duratiion timing-function delay iteration-count direction fil-mode play-state;

이름 / 지속시간 / 타이밍 함수 / 지연시간 / 반복 횟수 / 방향 / 필 모드 / 재생 상태

from http://comrin.tistory.com/26 by ccl(A) rewrite - 2021-10-10 13:01:22