변형(transform)

변형(transform) : 특정 요소의 크기나 형태, 스타일 등이 바뀌는 것

2차원/3차원 변형

- 수평/수직으로 웹 요소를 변형

- 크기/각도만 지정

- 2차원 좌표 사용

확대/축소

• scale(x,y) - 요소를 x, y 만큼 확대/축소
• scaleX(n) - 요소를 n만큼 x축으로 확대/축소
• scaleY(n) - 요소를 n만큼 y축으로 확대/축소
• scale3d(x,y,z) - 요소를 x, y, z축으로 각각 x, y, z 만큼 확대

기울이기

• skew(xdeg, ydeg) : 요소를 x축, y축으로 xdeg, ydeg만큼 기울임
• skewX(xdeg) : 요소를 x축으로 xdeg만큼 기울임
• skewY(ydeg) : 요소를 y축으로 ydeg만큼 기울임

회전

• rotate(deg) : 요소를 deg만큼 회전

translate 함수

• 지정한 방향으로 이동할 거리 지정 후 이동
• transform:translate(tx,ty) - x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동, ty 값을 주지 않으면 0으로 간주
• • translate3d(tx, ty, tz)
• • translateX(tx) : x축 방향
• • translateY(ty) : y축 방향
• • translateZ(tz) : z축 방향

Animation 관련 Css

애니메이션 속성

웹 요소에 애니메이션 속성을 추가

애니메이션을 시작해서 끝나는 동안 원하는 곳에 스타일을 바꾸어 애니메이션 정의 가능

키프레임(keyframe) : 애니메이션 중간에 스타일이 바뀌는 지점

애니메이션 속성

@keyframe : 애니메이션이 바뀌는 지점을 정의

• 형식 : @keyframe 이름(키프레임명) { 0% { / CSS 코드 / } n% { / CSS 코드 / } 100% { / CSS 코드 / } }
• 이름으로 애니메이션을 구분
• 시작점 0%, 끝점 100%로 놓고 지정
• 시작, 끝만 사용 시 from, to 키워드 사용 가능
• 필수값

animation-name 속성

• 애니메이션을 지정할 키프레임명 지정
• 애니메이션을 구분하는 역할
• @keyframe에서 지정한 이름을 사용
• 형식 : animation-name: 이름 | none
• 필수값

animation-duration 속성값

• 애니메이션의 지속시간 지정
• 설정 값은 초(s), 밀리초(ms)
• 필수값

animation-delay 속성값

• 애니메이션의 지연 시간 설정
• 형식 : animation-delay:지연시간

animation-direction 속성

• 애니메이션의 진행 방향을 지정
• 형식 : animation-direction:속성값
• normal : 애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서대로 진행 (to->from)
• reverse : 애니메이션의 진행 방향을 키 프레임에 역순으로 진행 (from->to)
• alternate : 1회 이상 실행시에는 홀수번째는 normal, 짝수번째는 reverse 진행
• alternate-reverse : 홀수번째는 reverse, 짝수번째는 normal

animation-iteration-count 속성

• 애니메이션의 반복 횟수 지정
• 형식 : animation-iteration-count:횟수
• 숫자 : 반복횟수 지정
• infinite : 무한 반복

animation-timing-function 속성

• 애니메이션의 속도 지정

animation-play-state 속성

• 애니메이션의 진행/정지 상태 정의
• 형식 : animation-play-state:속성값
• paused: 일시 정지
• running : 실행

animation 속성

• 모든 애니메이션 속성 지정
• 형식 : animation:name duration timing-function delay iteration-count direction fill-mode play-state
• 지정하지 않은 속성은 기본값 사용
• animation-duration 값은 필수값

머리아프다. 이걸 다 외워야 하다니.

애니메이션은 차근히 외운다 해도 트랜지션 속성은 다 외워야 편하게 작업할 수 있을 것 같다.