CSS Property - Animation 애니메이션 적용하기~!

우옹.. 오늘도 불태웠다..

CSS Animation(애니메이션)

 

---

 

• Transition의 효과와는 다르게 실제로 시간순서대로 애니메이션을 적용할 수 있는 속성입니다.
• Transform과 같이 사용하면, 반복되는 애니메이션 또는 스크롤이벤트때 나타나는 이벤트 등 다양하게 인터렉션을 만들 수 있습니다.
• 웬만한 인터렉션 효과는 CSS로 처리해 놓고 javascript에서 classList 속성을이용하여 제어하는 것이 좋습니다.

 

 

자, 한번 해봅시다~!

 

 

 

Animation 속성

- CSS animation은 자주 사용된다.

- 참조사이트 - 바로가기

property	value	description
animation	축약형	아래의 속성들을 축약형으로 쓸 수 있으며, 이때에 필수 속성은  animation-name 과 animation-duration이다.
animation-name	영문 대소문자구분
animation-duration	초단위로 설정	2s -> 2초동안 애니메이션이 진행됨
animation-timing-function	속도 keywords	ease-in -> 느리게 시작했다가 빠르게 끝남
animation-delay	지연(대기) 시간설정	2s -> 2초대기후 애니메이션 시작
animation-iteration-count	반복횟수, 숫자 또는 키워드	처음부터 끝까지 반복하는 횟수 지정 3 -> 3회 infinite -> 무한반복
animation-direction	진행방향	alternate 이라고 하면, 짝수번째는 거꾸로 진행되어 왔다갔다 하는 애니메이션을 쉽게 만들 수 있다.
animation-fill-mode	애니메이션의 시작과 끝의 위치 설정	css로 지정된 위치와 애니메이션의 시작, 끝나는 위치가 다를경우 보기에 안좋을 수 있다. 보통 both로 맞춘다.
animation-play-state	일시정지	마우스를 :hover했을때 애니메이션의 진행을 멈추려면 pause 값을 지정한다. div:hover { animation-play-state:paused; }

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.