[CSS] CSS(4) - transform / transition / animation

 

 

< CSS >

 

1. 전환 ( Transform )

 

 요소의 변환 효과 

 

transform : 변환함수1 변환함수2 변환함수3 ... ;

transform : 원근법 이동 크기 회전 기울임 ;

 

 

 2D 변환 함수 

 

2D 변환 함수
px	translate(x,y)	이동(x축,y축)
	translateX(x)	이동(x축)
	translateY(y)	이동(y축)
없음 ( 배수 )	scaleX(x)	크기(x축)
	scaleY(y)	크기(y축)
deg	rotate(degree)	회전(각도)
	skew(x,y)	기울임(x축,y축)
	skewX(x)	기울임(x축)
	skewY(y)	기울임(y축)
	matrix(n,n,n,n,n,n)	2차원 변환 효과

 

 3D 변환 함수 

 

3D 변환 함수
px	translateZ(z)	이동(z축)
	translate3d(x,y,z)	이동(x축,y축,z축)
	perspective(n)	원근법(거리)
없음(배수)	scaleZ(z)	크기(z축)
	scale3d(x,y,z)	크기(x축,y축,z축)
deg	rotateX(x)	회전(x축)
	ratateY(y)	회전(y축)
	rotateZ(z)	회전(z축)
	ratate3d(x,y,z,a)	회전(x축,y축,z축,각도)
	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3차원 변환 효과

 

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부

visible : 뒷면 보임 hidden : 뒷면 숨김

 

 

2. 전환 (Transition)

 

transition:속성명 지속시간 타이밍함수 대기시간; 

➡️ 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

➡️ 이때, 지속시간은 필수 포함 속성

 

transition
transition-property	전환 효과를 사용할 속성 이름을 지정	all : 모든 속성에 적용 속성 이름 : 전환 효과를 사용할 속성 이름 명시
transition-duration	전환 효과의 지속시간을 지정	0s : 전환효과 없음 시간 : 지속시간(s) 을 지정
transition-timing-function	전환 효과의 타이밍(easing) 함수를 지정	ease : 느리게 - 빠르게 - 느리게 linear : 일정하게 ease-in : 느리게 - 빠르게 ease-out : 빠르게 - 느리게 ease-in-out : 느리게 - 빠르게 - 느리게 cubic-bezier(n,n,n,n) : 지신만의 값 정의(0~1) steps(n) : n번 분할된 애니메이션
transition-delay	전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정	0s : 대기 시간 없음 시간 : 대기시간(s) 지정

 

 

3. Animation

 

 @keyframes 

 

 - CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능

 - 애니메이션의 중간 지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션 조절하는 기능

 - 키프레임을 변수에 선언하고 해당 변수를 CSS 에서 불러와서 사용할 수 있음

 - Keyframes 로 설정되는 값

   ➡️ to/from

   ➡️ 0% ~ 100%

 

animation 속성
animation-name(이름)	keyframes 로 지정한 애니메이션 이름
animation-duration(지속시간)	애니메이션 지속 시간
animation-delay(지연시간)	애니메이션 지연 시간
animation-iteration-count(반복횟수)	애니메이션 반복 횟수  소수점 ,infinite 가능
animation-timing-function(반복형태)	애니메이션이 진행되는 형태 ( 시간함수= ease , linear ... )
animation-direction(애니메이션 방향)	애니메이션 방향

 

단축 속성 : name duration timing-fumction delay iteration-count direction ;