CSS 기본 5

transform

요소에 이동, 회전, 확대, 축소, 비틀기 등의 변형효과를 줄 수 있음

• transform:translate(x,y) => x축으로 x만큼, y축으로 y만큼 이동

• transform:translateX() or transform:translateY() => 해당 축으로 ( )값만큼 이동
  
  
  

• transform:scale() => ( )값 만큼 요소를 축소하거나 확대

• transform:scaleX() or transform:scaleY() => 해당 축으로 ( )값 만큼 요소를 축소하거나 확대
  
  
  

• transform:skew(~deg, ~deg) => x deg, y deg 만큼 기울임 [기본값 : 1]

• transform:skewX(~deg) or transform:skewY(~deg) => 해당 (deg) 만큼 기울임 [기본값 : 1]
  
  
  

• transform:rotate(~deg) => 요소를 지정한 값만큼 회전

• transform:rotateX() or transform:rotateY() => X축 or Y축으로 해당 (deg) 만큼 회전

+a) transform은 중첩적용이 가능 ("," 없이 띄어쓰기)


ex. transform:rotate(30deg) translateY(120px)

* [ transform은 ```inline``` 에서 작동하지 않음 (X) ]

transform + transition

transform은 transition, animation과 함께 사용하여 더 다채로운 애니메이션 효과를 만들 수 있음

ex. (버튼 hover 시 순서대로 올라가는 글자 애니메이션)

animation

여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법

animation과 transition의 차이

• transition => 특정한 event를 기점으로 작동 (ex. hover)

• animation => 시작을 위한 event 필요없음 (X)
                              시작, 정지, 반복까지 제어 가능

  
  +a) 가급적이면 transition으로 해결하고,transition으로는 어려울 때 animation 활용!

@keyframes

CSS animation의 시작, 중간, 끝 등의 중간 상태를 정의

• 작성법 1 (from - to)

• 작성법 2 (진행도 %)

@keyframes 를 이용한 animation 적용

1. @keyframes 로 이름을 지정한 다음 시작과 끝 부분에 애니메이션 변환 효과를 입력

2. animation 속성을 넣고자 하는 곳에 animation-name 및 효과를 입력
   
   
   

*animation에서 이동하는 효과를 주려면 기본적으로 해당 속성값을 넣고자 하는 곳에 Position이 지정되어 있어야 함

animation 속성

• animation-name => 어떤 @keyframe을 요소에 적용할 것인지를 지정

• animation-duration => 애니메이션 한 번 재생에 걸리는 시간

• animation-direction => 애니메이션 재생방향 지정
  normal = 정방향
  reverse= 역방향
  alternate = 정방향 재생 (반복 시 정방향/역방향 번갈아 재생)
  alternate-reverse = 역방향 재생 (반복 시 역방향/정방향 번갈아 재생)

• animation-iteration-count => 애니메이션 재생 횟수 지정

• animation-timing-function => 애니메이션 재생 패턴 지정

• animation-delay => 애니메이션 시작을 얼마나 지연할 지 지정

• animation-fill-mode => 애니메이션의 상태 유지
  * [재생횟수가 infinite가 아닐 경우]
  -forwards = 마지막 프레임 유지
  -backwards = 처음 적용한 스타일의 프레임 유지

animation 단축속성

animation : moveRight 0.5s linear 1s infinite alternate

       name duration timing-function delay iteration-count direction

*순서를 다르게 할 경우 오류가 발생하거나 적용되지 않을 수 있음