css

정혜지·2022년 7월 28일

transition

css속성의 시작과 끝을 지정하여 중간값에 동적인 효과 넣을 수 있도록 하는 기능

하위속성 중 타이밍 지정함수
transition-timing-fucntion

ease : 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
ease-out : 빠르게 - 느리게
cubic-bezier(n,n,n,n) :
- 참고 : https://easings.net/ko
- https://greensock.com/ease-visualizer/

transition: 1s 2s steps(4);

transition-property : 속성 이름(all)
transition-duration : 지속시간(0s)
transition-timing-fuction : 타이밍함수지정(ease)
https://easings.net/ko
ease : 빠르게-느리게
linear : 일정하게
ease-in : 느리게-빠르게
ease-out : 빠르게-느리게
cubic-bezier(n,n,n,n) (자신만의 값을 정의)
transition-delay : 대기시간(0s)

transform

요소의 변환 효과 지정

transform : 변환함수1, 2, 3, ...
transform : 원근법 이동 크기 회전 기울임

리페인팅 현상 : 부화현상 -> 방지 : transition 같이 쓰기~!

2D 변환 함수
이동 : translate(x, y), translateX(x), translateY(y) 이동(x축, y축) 단위
크기 : scale(x, y), scaleX(x), scaleY(y) 크기(x축, y축), 없음(배수)
회전 : rotate(degree) 회전(각도), deg
기울임 : skew(x-deg, y-deg), 기울임(x축, y축), deg

3D 변환 함수

이동 : translate3d(x,y,z), translateZ(z)
크기 : scale3d(x,y,z) scaleZ(z)
회전 : rotate3d(x,y,z,a(각도)), rotateX(x), ratateY, roatateZ
원근법 : perspective(n) 원근법(거리) 단위

perspective 하위 요소를 워근거리 지정
함수 perspective 적용대상 : 부모 / 기준점 설정 : perspective-orgin
속성 transform:perspective(600px) 적용대상 : 관찰대상 / 기준점 : transform-origin

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

animation

요소의 동작을 세분화하여 지정할 수 있는 기능
@keyframes

// animation
animation-name              : @keyframes 규칙의 이름을 지정 (none)
animation-duration          : 지속시간 설정(0s)
animation-timing-function   : 타이밍함수지정(ease)
animation-delay             : 대기시간설정(0s)
animation-iteration-count   : 반복횟수(1)
animation-direction         : 방향설정(normal)
animation-fill-mode         : 전후상태(위치)설정(none)
animation-play-state        : 재생과 정지 설정(running)

animation : 이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]

animation 단축속성

  /* name, duration, delay, interation-count */
  /* duration이 반드시 delay보다 앞에 사용되어야한다 */

dirction
normal : 정방향
reverse : 역방향
alternate : 정방향 - 역방향 반복
alternate-reverse : 역방향 - 정방향 반복

// fill-mode
none : 기존 위치 시작 -> 애니메이션 시작 위치 이동 -> 동작 -> 기존위치 끝
forwards : 기존 위치 시작 -> 애니메이션 시작 위치 이동 -> 동작 -> 애니메이션 끝위치에서 끝
backwards : 애니메이션 시작 위치 시작 -> 동작 -> 기존 위치에서 끝
both : 애니메이션 시작 위치 시작 -> 동작 -> 애니메이션 끝 위치에서 끝