[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 11.트랜지션과 애니메이션"

11-1 변형 알아보기

transform과 변형함수

css에서 변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 함.

transform: 함수

웹 요소를 이동시키는 변형함수: translate()

웹 요소를 x축으로 50 px, y축으로 100px 이동하는 클랙스 선택자 .photo를 정의.

.photo { transform: translate(50px, 100px)

 

2차원 변형: 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커짐.

3차원 변형: x축과 y축 원근감을 주는 z축을 추가해서 변형. z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아짐.

2차원 변형함수

종류	설명
translate(tx, ty)	지정한 크기만큼 x, y축으로 이동
translate(tx)	지정한 크기만큼 x축으로 이동
translate(ty)	지정한 크기만큼 y축으로 이동
scale(sx, sy)	지정한 크기만큼 x, y축으로 확대, 축소
scale(sx)	지정한 크기만큼 x축으로 확대, 축소
scale(sy)	지정한 크기만큼 y축으로 확대, 축소
rotate(각도)	지정한 각도만큼 회전
skew(ax, ay)	지정한 각도만큼 x, y축으로 왜곡
skew(ax)	지정한 각도만큼 x축으로 왜곡
skew(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, 각도)	지정한 각도만큼 회전
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전
rotateX(각도)	지정한 각도만큼 x축으로 회전
rotateY(각도)	지정한 각도만큼 y축으로 회전
rotateZ(각도)	지정한 각도만큼 z축으로 회전
perspective(길이)	입체적으로 보일 수 있도록 깊잇값 지정

 

---

11-2 트랜지션 알아보기

트랜지션: 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것

 

트랜지션의 속성

종류	설명
transition-property	트랜지션 적용 대상 지정, 기본값 all
transition-duration	트랜지션 실행 시간 지정, 단위는 s(초), 기본값 0
transition-timing-function	트랜지션 실행 형태 지정
transition-delay	트랜지션 지연 시간 지정, 단위는 s(초), 기본값 0
transition	모든 속성 한꺼번에 지정

 

 

transition-property { all | none | <속성이름> }
transition-duration: <시간>
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
transition-delay: <시간>
transition: <transition-property값> | <transtion-duration값> | <transtition-timing-function> | <transtition-delay값>​

 

---

11-3 애니메이션 알아보기

css 애니메이션에서 사용하는 속성

종류	설명
@keyframes	애니메이션이 바뀌는 지점 설정
animation-delay	애니메이션의 시작 시간 지정
animation-direction	애니메이션을 종료한 뒤, 진행할 방향 지정
animation-duration	애니메이션의 실행 시간 지정, 단위 s(초)
animation-iteration-count	애니메이션의 반복 횟수 지정
animation-name	@keyframes 로 설정한 중간 상태 지정
animation-timing-function	키프레임의 전환 형태 지정
animation	animation 속성 한꺼번에 지정

 

@keyframes <이름> {
	<선택자> { <스타일> }
    }
animation-name: <키프레임 이름> | none
animation-direction:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
animation-duration: <시간>
animation-iteration-count: <숫자> | infinite
animation-timing-function: linear | ease | |
animation: <animation-delay> | <animation-direction> | <animation-duration>
           <animation-iteration-count> | <animation-name> | <animation-timing-function>

 

 

 

 

---

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB