💻 transform
요소에 변형을 줄 수 있는 기능이다. 이때, 직접적으로 width와 height 를 수정하는 것과 달리, 레이아웃에 관여하지 않는다. 그 자체의 넓이와 높이 등을 유지하기 때문이다.
변형 가능한 요소만 transform할 수 있기 때문에 비대체 인라인박스, 표 열이나 열 그룹 박스에는 적용되지 않는다.
transform: translate(120px, 50%); /* 위치 이동 */
transform: scale(2, 0.5); /* 크기 조절 */
transform: rotate(0.5turn); /* 회전 */
transform: skew(30deg, 20deg); /* 기울이기 */변형의 기준점을 변경할 수도 있다.
한쪽 꼭지점을 기준으로, 회전을 하면 빙글 돌아가는 모션 연출이 가능하다.
transform-origin: center; /* 기본 값 */
transform-origin: top left; /* 꼭지점 지정 */
transform-origin: 50px 50px; /* 픽셀로 지정 */
transform-origin: bottom right 60px;translate와 absolute 를 사용하면 문서의 정 가운데에 배치시킬 수 있다.
🔗 참고: 쉬운 중앙 정렬
💻 transition
CSS 프로퍼티의 값이 변화할 때, 그 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 이는 변화를 부드럽게 하여 애니메이션의 속도를 조절한다.
이때 transition은 전환되는 모션에 속성을 가미하는 역할일 뿐, 그 자체로 스타일링을 주는 속성이 아니다. 주로 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션으로 작동된다.
/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* 개별적인 명령 */
transition-property: all;
transition-duration: 3s;
transition-delay: 1s;
transiton-timing-function: ease-in;💻 transform + transition
.box {
width: 100px;
height: 100px;
background-color: green;
transform-origin: bottom right;
transition: all 1s ease-in-out;
}
.box:hover{
transform: rotate(180deg);
}transition을 all 이 아닌 transform 으로 주어도 된다. 또한 :hover 클래스 안에 넣을 수 있으나 이럴 경우 마우스를 올릴 때만 적용되어 뗄 때는 적용이 되지 않은 채 바로 돌아가게 된다.
💻 css animation
🔗 참고: mdn
transform과 달리 다수의 스타일을 전환하는 애니메이션을 적용한다. a에서 b로 c로 이동하는 애니메이션을 지속 시간과 빠르기 등을 설정하여 구현할 수 있다.
CSS 애니메이션의 장점
- 가볍고 빠르다.
많은 처리 능력이 필요하지 않은 간단한 애니메이션에 이상적이다. JS 애니메이션과 달리 외부 라이브러리나 플러그인이 필요하지 않고, 웹 사이트 로딩 속도 지연이 되지 않는다.
- 크로스 브라우징 지원
Firefox, Chrome, Safari 및 Edge를 포함한 모든 웹 브라우저에서 작동하므로, 브라우저에 관계없이 모든 사용자가 사용할 수 있는 애니메이션을 만들 수 있다.
- 손쉬운 사용
간단한 문법을 사용한다. JavaScript를 사용한 애니메이션보다 코드가 더 간결하며 가독성이 좋음. 몇 줄의 코드만으로 웹 사이트에 간단한 애니메이션을 추가하여 보다 흥미롭고 상호 작용 할 수 있다.
⌨ @keyframes
개발자가 애니메이션 중간중간에 키프레임을 잡아 css 애니메이션 과정의 중간 절차를 제어할 수 있게 된다.
/* 시작과 끝을 지정할 때 */
@keyframes rotate {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
/* 3개 이상의 키프레임을 잡을 때 */
@keyframes identifier {
0% { top: 0; left: 0;}
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}⌨ animation-name
@keyframes 그룹의 이름 = animation-name
기본 값은 none이다.
위와 같은 키프레임에서, 이름을 아래와 같이 가상 클래스 선택자 스타일에 작성한다.
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
}⌨ animation-duration, day, timing-function
animation-duration
@keyframes 하나가 완료될 때 걸리는 시간을 지정한다. s ms 단위로 지정할 수 있다. 음수는 불가능하다.
animation-delay
애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋이다. 음수로 지정할 경우 애니메이션이 시작 n초 전부터 시작되어 있던 것처럼 연출 가능하다.
animation-timing-function
ease-in-out linear 등의 속성을 사용 가능하다.
⌨ animation-iteration-count
시퀀스를 반복할 횟수를 작성한다.
기본 값은 1이고, 숫자로 횟수를 표현할 수 있으며 무한반복은 infinite를 활용한다.
⌨ animation-direction
여러 개의 애니메이션을 실행하는 순서를 정한다.
normal: 기본 값, 처음부터
reverse: 역방향부터
alternate: 매 사이클마다 방향이 뒤집히며, 첫 번째는 정방향
alternate-reverse: 매 사이클마다 방향이 뒤집히며, 첫 번째는 역방향
⌨ animation-play-state
running: 기본 값, 실행하기
paused: 일시 정지 속성 추가
-> hover 했을 때 멈추기 등을 설정
⌨ animation-fill-mode
실행 전후에 스타일을 적용하는 방법
none: 기본 값
forwards: 변화한 마지막 상태를 유지
backwards: 처음 변화된 상태로 시작
both: 처음 변화한 상태로 시작하여 마지막 변화한 상태를 유지
만약 흰색인 박스가 빨간색으로 변했다가 검정으로 변했다가 파랑색으로 변하고 끝난다고 치자.
none-> 흰색
forwards-> 파랑으로 끝남
backwards-> 빨강으로 시작
both-> 빨강으로 시작하여 파랑으로 끝남
⌨ shorthand
/* duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;개별로 작성하면 아래와 같다.
animation-name: rotate;
animation-duration: 1s ;
animation-delay: 0.3s;
animation-timing-function: ease-in;
animation-iteration-count:
animation-direction:
animation-play-state:
animation-fill-mode:
