평소 두리뭉실하게 알고, 사용해왔던 CSS의 transition, transform, animation속성에 대해 정리할 것이다.(친절하지 않게)
그리고 Multi Columns속성은 존재 자체를 처음알았다...반가워😃
1. transition (전환)
- 하나의 스타일에서 다른 스타일로 전환시켜주는 속성
- 바뀌기 전 상태의 box에 입력하는 것이 일반적
transition은 property(대상),duration(진행시간), delay(지연시간),timing-function(속도 곡선)을 지정할 수 있다.
| transition 속성 | 설명 |
|---|---|
| transition-property 트렌지션 대상 | 기본값 : all (all : 요소의 모든 속성이 대상) none : 변화없음, 아무것도 바뀌지 않는다. <속성이름> : 적용할 특정 속성 이름 지정 가능 ex) transition-property : width, background-color |
| transition-duration 트렌지션 진행시간 | 지정한 시간만큼 트렌지션 실행, 단위는 s,ms(0.5s이면 .5s로 표기) |
| transition-delay 트렌지션 지연시간 | 트렌지션이 언제부터 시작할 것인지 지정 실행, 단위는 s,ms(기본값은 0, 음수로도 지정 가능) |
| transition-timing-function 트렌지션 속도 곡선 | 기본값 : ease(천천히 시작해서 빨라지다가 다시 천천히 종료) Linear : 동일한 속도 외 ease-in(느리게 시작),ease-out(느리게 시작 느리게 종료), ease-in-out(느리게 시작 느리게 종료)가 있다. |
| etc | transition : 2s step(4) - 2동안 4step으로 나눠서 트렌지션 진행 |
<style> transition : 2s(duration) 1s(delay) linear(timing-function) </style>
2. transform (변환)
- 요소의 변환 효과를 지정
| transform 2D 속성 | 설명 |
|---|---|
| translate(이동) | (x,y) x축으로 몇 px, y축으로 몇 px 이동 position relative와 굉장히 유사하다. 왜 translate를 사용하나? position은 배치하고 끝나는 개념, animation에 특화되어있지 않아 랜더링시 최적화 어려움. 단순히 배치가 목적이라면 position 사용 적합. 위치가 실시간으로 변해야 한다면 translate |
| scale(크기) | 크기 확대/축소 배수로 지정(단위x) |
| rotate(회전) | 회전 각도 단위: deg |
| skew(기울기) | (x,y) 단위: deg |
| etc | translate와 rotate를 같이 사용하면 같이 반응한다. |
| transform 3D 속성 | 설명 |
|---|---|
| translate3d() | (x,y) x축으로 몇 px, y축으로 몇 px |
| scaleZ() | 크기 확대/축소 배수로 지정(단위x) |
| rotateX() rotateY() | 회전 각도 단위: deg |
| skew() | (x,y) 단위: deg |
| perspective | 원근감을 나타냄. 함수와 속성 두가지로 존재 단위:px 함수 : transform함수의 가장 앞에 위치 속성 : 하위요소를 관찰하는 원근거리 설정, 가장 상위요소에 명시해야 한다(부모요소) 정리 관찰대상이 여러개이면 perspective 요소 하나이면 ㅔperspective()함수 |
| transform-origin | transform 사용시 기준점 설정(x,y) 기본값은 개체의 중앙, 조절은 px 또는 (bottom,right) |
| transform-style | 현재속성에 3d함수를 사용하고 자식속성에도 적용하고 싶다면 reserved-3d, 아니라면 기본값(none) |
| etc | translate와 rotate를 같이 사용하면 같이 반응한다. |
3. animation(애니메이션)
Ryuwisdom