트랜지션과 애니메이션 속성 모음

최근 시험기간이기도 하고 학교 공부에 집중하다보니 블로그에 너무 소홀했던 것 같다.

처음에는 별로 나에게 도움이 되지 않을 줄 알았었던 과목도 이번 단원을 통해 다시 한 번 되짚어볼 수 있었고, 아는 내용이 나와 신기하기도 했었다.

css 함수 중 rotate()와 skew()함수는 모두 학교에서 배운 Homogeneous Transformation 과 연관이 있었고, 평소같았으면 그냥 함수의 사용법만 알고 넘어갔을 단원도 그 함수가 어떻게 작동하는지와 같은 비교적 깊은 생각도 할 수 있었다.

트랜스 폼(transform) : 요소의 형태를 변형하거나 위치를 변경하는 것

사용법 : transform: 변형함수

2차원 변형함수

translate(tx,ty) : 지정한 크기만큼 x축 y축으로 이동

translateX(tx) : 지정한 크기만큼 x축으로 이동

translateY(ty) : 지정한 크기만큼 y축으로 이동

scale(sx, sy) : 지정한 크기만큼 x축과 y축으로 확대/축소

scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소

scaleY(sy) : 지정한 크기만큼 y축으로 확대/축소

rotate(deg) : 지정한 각도만큼 회전

skew(ax, ay) ; 지정한 각도만큼 x축과 y축으로 왜곡

skewX(ax) : 지정한 각도만큼 x축으로 왜곡

skewY(ay) : 지정한 각도만큼 y축으로 왜곡

3차원 변형함수

translate3d(tx, ty, tz) : 지정한 크기만큼 x, y, z 축으로 이동

translateZ(tz) : 지정한 크기만큼 z축으로 이동

scale3d(sx, sy, sz) : 지정한 크기만큼 x, y, z 축으로 확대/축소

scaleZ(sz) : 지정한 크기만큼 Z축으로 확대/축소

rotate(rx, ry, deg) : 지정한 각도만큼 회전

rotate3d(rx, ry, rz, deg) : 지정한 각도만큼 회전

rotateX(deg) : X축으로 회전

rotateY(deg) : Y축으로 회전

rotateZ(deg) : Z축으로 회전

perspective(dep) : 깊이값 지정

트랜지션(transition) : 시간에 따라 요소의 스타일 속성이 바뀌는 것

속성

transition-property : 트랜지션의 대상 지정

transition-duration : 트랜지션을 실행할 시간 지정

transition-timing-function : 트랜지션의 실행 형태 지정 // 트랜지션의 속도가 어떻게변화할지

transition-delay : 트랜지션의 지연 시간 설정 // 트랜지션 효과를 언제부터 실행할 것인지

transition : 모든 속성을 한번에 지정

애니메이션

- 키 프레임 : 애니메이션 중간에 스타일이 바뀌는 지점 (@keyframes으로 정의)

속성

@keyframes : 애니메이션이 바뀌는 지점 설정

animation-delay : 애니메이션 시작 시간 지정

animation-direction : 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 시작할지 지정

animation-duration : 애니메이션 실행시간 지정

animation-iteration-count : 애니메이션 반복횟수 지정

animation-name : @keyframes로 설정해놓은 중간 상태 지정

animation-timing-function : 키프레임의 전환 형태 지정

animation : 모든 속성을 한번에 지정