[CSS] display/transition/animation/keyframes/transform/translate

CSS

 

• display

display 속성값	줄바꿈	width, height 지정	margin 지정	예시 태그
inline	X	불가	좌우만 가능	span, a
block	O	가능	가능	div, p
inline-block	X	가능	가능

 

• transition 

CSS 속성값이 변할때, 변하는 속도를 제어

속성(프로퍼티)	설명	기본값
transition-property	트랜지션이 적용될 대상 속성 지정	all
transition-duration	트랜지션 지속시간. 단위 : s 또는 ms	0s
transition-delay	트랜지션 시작까지 걸리는 딜레이 시간 지정	0s
transition-timing-function	트랜지션 중간값 계산하는 방법(수치 함수) 지정	ease
transition	위 속성들을 한번에 지정하기위한 단축속성. 숫자로 지정된 값이 2개일시 duration delay 순서로 적용	0s all ease 0s

 

• animation/keyframes

애니메이션 : element에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 전환시키는것

2가지 요소로 이루어짐(animation/keyframes)

 

-animation : 애니메이션을 나타냄. 총시간/반복여부 지정

속성(프로퍼티)	설명	기본값
animation-name	중간 상태 지정할 대상 @keyframes 규칙을 이용해 기술
animation-duration	한 싸이클의 애니메이션 지속시간. 단위 s 또는 ms	0s
animation-delay	엘리먼트 로드 후 언제 애니메이션이 시작될지	0s
animation-direction	애니메이션 종료 후 다시 처음부터 시작할지 역방향일지	normal
animation-iteration-count	몇 번 반복할지. infinite로 무한반복가능	1
animation-play-state	애니메이션을 재생상태 (running 또는 paused) 지정	running
animation-timing-function	중간 상태 변화에 대한 시간조정함수	ease
animation	단축속성	위의 기본값

 

 

-keyframes : 애니메이션 중간상태 제어. 애니메이션의 흐름을 여러 지점으로 나눠 CSS 값을 설정가능

형태 : @keyframes keyframes-name { 지점 { 속성 }, ... }

keyframes-name 값의 대상은 animation-name 프로퍼티값으로 설정

지점 설정 방법

from, to 키워드 이용 : from{ } to{ } 키워드  : 시작-끝 시점

숫자% 이용 : ex) 0%{ } 50%{ } 100%{ } : (시작)0~50(중간)~100(끝) 지점별 제어

 

*transition 과 animation 의 차이점?

transition은 엘리먼트에 변화가 있을때 적용하는것이다. 직접 변화를 설정하진 못한다.

animation은 엘리먼트에 직접 변화를 설정하는것이다. 

 

• transform

엘리먼트에 대한 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)