transition 속성
transition은 속성을 서서히 변화시키는 속성
div {
transition: property duration [timing-function] [delay];
}① property
transition을 적용시킬 속성을 지정
transition-property: none | all | property | initial | inherit
- none : 모든 속성에 적용하지 않는다.
- all : 모든 속성에 적용한다.
- property : 속성을 정해준다. 여러개의 속성을 지정할 경우 쉼표로 구분
- initial : 기본값으로 설정한다.
- inherit 부모 요소의 속성값을 상속받는다.
② duration
transition의 총 시간을 지정(지속시간)
transition-duration: time | initial | inherit
ex) transition: font-size 2.5s; //font-size만 바꿀때
ex) transition: all 2.5s; //전부바꿀때
- 기본값은 0s
- ms | s -> 1000ms == 1s
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받는다.
③ timing-function
transition의 변화 속도를 지정(진행속도)
transition-timing-function: ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit
- ease-in : 처음에는 천천히 나중에는 빨리
- ease-out : 처음에는 빨리 나중에는 천천히
- ease-in-out : ease-in, ease-out을 섞은것
- cubic-bezier(n, n, n, n) : n에는 0~1까지 넣어준다.
https://cubic-bezier.com/ 참고! - initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받는다.
④ delay
transition이 몇초후에 실행되면 좋을지 설정
transition-delay: time | initial | inherit
- 기본값은 0s
- ms | s -> 1000ms == 1s
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받는다.
👩💻 참고) transition: font-size 1000ms ease-out, background-color 2000ms cubic-bezier(0.8, 0.5, 0.9, -0.6) 1000ms; 이런식으로 각각의property마다 개별적으로 줄 수 있다.
animation 속성
CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있다. (transition보다 자유도가 더 크다)
div {
animation: property duration [timing-function] [delay]
}① animation-name : 애니메이션이름;
- 어떤 @keyframes를 사용할지 정한다.
② @keyframes
어떤모양에서 어떤 모양으로 변할지 정해준다.
@keyframes 애니메이션이름 {
from {
/* rules */
}
to {
/* rules */
}
0% {}
50% {}
100% {}
}- 애니메이션이름 : 애니메이션의 이름을 지정
- 0% : 시작할 때의 모양, 0% 대신 from 사용가능
- 100% : 끝날 때의 모양, 100%대신 to 사용가능
③ animation-duration
애니메이션의 총 시간,
animation-duration: time | initial | inherit
- time : 지속시간을 지정, ms | s 사용
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받는다.
④ animation-timing-function
애니메이션의 진행속도를 지정
animation-timing-function : ease-in | ease-out | ease-in-out
⑤ animation-delay
애니메이션을 시작하기 전에 대기하는 시간(몇초뒤에동작하는지)
animation-delay: time | initial | inherit
- time : 시간을 지정, 기본값 0, ms | s 사용
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받는다.
⑥ animation-iteration-count
애니메이션의 반복횟수 지정
animation-iteration-count : 정수입력 | infinite(무한반복)
⑦ animation-direction
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
- normal : 기본값, 정해진 순서대로 진행
- reverse : 반대 순서로 진행
- alternate : 정해진 순서로 진행했다가 반대순서로 진행
- alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행
- initial : 기본값으로 설정
- inherit: 부모 요소의 속성값을 상속받는다.
ex) animation-direction: alternate;
번갈아가면서작동 (form->to로 갔다가 reverse(to -> from)갔다가)
transform 속성
transform 속성으로 요소를 회전하거나 확대/축소 등 형태를 변형할 수 있다.
① transform: translate(x, y);
요소를 x축, y축으로 위치시키고 싶을 때
- translateX : x축 방향으로 이동
- translateY : y축 방향으로 이동
👩💻 참고) 안에 px말고 %단위로도 넣을 수 있음 -> 누구를 기준으로 %를 가지는지 (transform이 들어있는 자기자신의 크기를 기준으로)
.box{
width: 300px;
height: 300px;
transform: translate(10%, 10%);
/* width의 10%, height의 10% */
}② transform: scale(N);
N배만큼 사이즈를 확대하거나 축소할 때 사용
👩💻 참고) transform: scale(x, y); : 자신의 width만큼의 x배, height의 y배
③ transform: rotate(각도);
각도만큼 요소를 회전시킨다.
- transform: rotate(angle)
- transform: rotateX(angle) : x축을 기준으로 회전
- transform: rotateY(angle) : y축을 기준으로 회전
