[ CSS3 ] transform / transition / animation

속성	설명	mdn
transform	변형	바로가기
transition	효과	바로가기
animation	애니메이션	바로가기
@keyframes	애니메이션	바로가기

 

transform

메소드	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다.	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다.	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
skew(x-angle,y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다.	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)
rotateX(angle)	요소를 angle만큼 X축 회전시킨다.	+/- 각도(deg)
rotateY(angle)	요소를 angle만큼 Y축 회전시킨다.	+/- 각도(deg)

 

transform-origin : 회전 중심(원점·기준점)

백분율(%)	키워드
0% 0%	[top left] / [left top]
0% 50%	[left] / [left center] / [center left]
50% 0%	[top] / [top center] / [center top]
0% 100%	[bottom left] / [left bottom]
100% 0%	[right top] / [ top right]
50% 100%	[bottom] / [bottom center] / [center bottom]
100% 50%	[right] / [right center] / [center right]
100% 100%	[bottom right] / [right bottom]

 

 

 

3D

 

 

 

transition

프로퍼티	설명	기본값
transition-property	트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다	all
transition-duration	트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition-timing-function	트랜지션 효과를 위한 수치 함수를 지정한다.	ease
transition-delay	프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다

 

 

위치속성 : top, left, bottom, right 

크기속성 : width, height 

박스속성 : margin, padding 

테두리속성 : border-width, broder-radius, border-color 

색상속성 : color, bakcground-color 

투명도속성 : opacity 

변환속성 : transform 

 

cubic-bezier	바로가기
matthewlein	바로가기

 

 

 

animation

프로퍼티	설명	기본값
animation-name	@keyframes 애니메이션 이름을 지정한다	mdn
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.	0s
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다.	ease
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
animation-iteration-count	애니메이션 재생 횟수를 지정한다.	1
animation-direction	애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.	normal
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다.	running
animation	모든 애니메이션 프로퍼티를 한번에 지정한다
animation-timeline	애니메이션의 진행을 제어하는 ​​데 사용되는 타임라인을 지정	바로가기

 

 

 

 

프로퍼티값	설명
ease	기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear	시작부터 종료까지 등속 운동을 한다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-out	ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

 

 

 

# animation-timeline

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline

animation-timeline - CSS: Cascading Style Sheets | MDN

 

animation-timeline: scroll();
animation-timeline: scroll(scroller axis);

 

animation-timeline: scroll(scroller axis);

scroller 

:

nearest : 가장 가까운 부모

self  : 나 자신

root : viewport

 

axis

:

block : 세로 스크롤 방향 기준

inline : 가로 스크롤 방향 기준

 

animation-timeline: scroll(root block)

 

 

https://scroll-driven-animations.style/

Scroll-driven Animations

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view

view() - CSS: Cascading Style Sheets | MDN