14. 애니메이션 효과
🐣 @keyframes
✔️ 특정한 시간에 해당 요소가 가져야할 css 명시
✔️ 처음: from | 0% / 마지막: to | 100%
🐤 animation
✔️ animation: 이름 duration, delay, iteration-count, direction, fill-mode, play-state
animation: ani 2s 0.5s infinite alternate ease;
✅ animation-name: @keyframes 규칙이름
✅ animation-duration: 지속시간
✅ animation-timing-function: 속도감(ease, ease-in, ease-out)
✅ animation-delay: 대기시간
✅ animation-iteration-count: 반복횟수_ infinite 무한반목
✅ animation-direction:
✴️normal(정방향)
✴️reverse(역방향)
✴️alternate(정->역 왕복)
✴️alternate-reverse(역->정 왕복)
✅ animation-fill-mode:
✴️전후 상태 none
✴️fowards: 끝에서 멈춤
✴️backwards: 처음 위치에서 멈춤
✴️both: 처음0~끝100%
✅ animation-play-state: 재생과 정지_ running/paused
🐤 transition
transition: 속성이름 duration timing-function delay
✅ transition-property: 전환 효과를 사용할 속성 이름값_ all(기본값)
✅ transition-duration: 지속시간(기본 0s)
✅ transition-timing-function: 속도감
✴️linear: 처음부터 끝까지 일정한 속도
✴️ease: (기본값), 천천히 시작되어 빨라지고 마지막에 느려짐
✴️ease-in: 천천히 시작됨
✴️ease-out: 천천히 끝남
✴️ease-in-out: 천천히 시작되어 천천히 끝남
✴️cubic-bezier(n, n, n, n): 사용자가 정의한 cubic-bezier함수에 따라 진행
✅ transition-delay: 지연 시간(기본값 0s)
15. 변형 trnsform
🐥 2D/3D 변환 함수
✅ translate: x축/y축 이동, 음수 사용 가능
✴️2D: translate(x, y), translateX(x), translateY(y)
✴️3D: translate(x, y, z), translateZ(z)
✔️ 중앙배치 방법
top: 50%; left:50%;
transform: translate(-50%, -50%);
✅ scale: 배율만큼 늘리거나 줄임, 1보다 크면 확대, 이하면 축소
✴️2D: sacle(x,y), scaleX(x), scaleY(y)
✴️3D: sacle(x,y, z), scaleZ(z)
✅ rotate: 시계/반시계 방향으로 회전, 음수 사용
✴️2D: rotate(degree)
✴️3D: rotate3d(x, y, z), rotateX(x), rotateY(y). rotateZ(z)
✅ skew: 주어진 각도만큼 x/y축 방향 기울임, 음사 사용 가능
✴️2D: skew(x-deg,y-deg), skew(x-deg), skew(y-deg)
✅ transform-origin: 2D, 요소에 변형을 적용하는 변환 중심 설정
✅ perspective: 3D, 하위 요소를 관찰하는 원근 거리 설정, 변환함수 앞쪽에 선언
✔️ perspective(n)_ n=숫자(단위)
✔️ perspective 값이 클수록 원근감 작게 작용 거리가 멀기 때문
✔️ perspective속성과 함수의 차이:
전자(perspective)는 관찰 대상의 부모 요소에 적용
후자(transform:perspective)는 관찰 대상에 직접 적용
transform:perspecitve(800px), rotateZ(45deg)
perspective:800px
✅ 3D transform 변환속성
✴️ transform-origin:요소 변환 기준점 설정 left/right/center/%/단위
✴️ transform-style: 3d변환 요소의 자식도 3d변환을 사용할지 여부 설정 flat /preserve-3d
✴️ perspective: 윈근법 perspecitve:숫자(단위)
✴️ perspective-origin: 원근거리의 기준점 설정
✴️ backface-visibility: 3d변환으로 회전된 요소의 뒷면 숨김 설정 visible/hidden
