Transform
요소의 변환 효과
transform: 변환함수1, 변환함수2, 변환함수3...;
transform: 원근법 이동 크기 회전 기울임;
translate
위치를 이동시키는 함수
translate(x,y): 이동 (x,y)translateX(x): 이동(x)translateY(y): 이동(y)
scale
크기를 변환하는 함수
scale(x,y): 변환 (x,y)scaleX(x): 변환(x)scaleY(y): 변환(y)
rotate
회전시키는 함수
rotate(degree): 회전(각도)
skew
축을 기울이는 함수
skewX(x)skewY(y)
backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
(뒷면을 보여줄건지 안 보여줄건지)
visible: 보여줌hidden: 숨김
+) transform 속성 여러개 작성 시에는 이어서 적어주면 됨
ex) transform: tralsnslate(100px) sclae(2)
Transition
transition-property
전환 효과를 사용할 이름 지정
all: 모든 속성에 적용속성 이름: 전환 효과를 사용할 이름 명시
transition-duration
지속시간 지정
- 0s : 지속시간X
- 시간: 지속시간 지정
transition-timing-function
타이밍을 지정해주는 함수
ease: 느리게-빠르게-느리게linear: 일정하게ease-in: 느리게-빠르게ease-out: 빠르게-느리게ease-in-out: 느리게-빠르게-느리게
transition-delay
효과를 몇 초 뒤에 시작할지 대기 시간을 지정
- 0s : 대기시간X
- 시간s: 대기시간 지정
transition을 한 줄로 작성하고 싶을때
transition: property, duration, timing-function, delay
duration은 필수 포함 속성임
+) transition을 div 요소가 아닌 hover에 걸었을 때는 transition이 hover에서만 발동하기 때문에 hover가 아닌 div요소에 걸어줘야 transition이 줄어들 때에도 적용이 된다.
Animation
@keyframes
애니메이션 효과를 개발자가 직접 지정하게 해주는 함수
to/from: 처음과 끝0%~ 100%: 세밀하게 조정 가능
@keyframes도 속성은 transition과 유사함
animation-name: 이름animation-duration: 지속 시간animation-delay: 지연시간animation-iteration-count: 반복횟수nimation-timing-function: 형태animation-direction: 방향
animation을 한 줄로 작성하고 싶을 때
animation: name duration timing-function delay iteration-count direction
특정한 속성을 부여할 때에는 keyframe안에서 똑같이 줘야함 (새로운 속성이 생기면 자연스럽지 않고 뚝 끊기게 나오게 됨)
++) 실습 ani_town 복습& 유사 애니 만들어보기
⋆｡˚☁｡⋆｡˚☾˚｡⋆