[HTML, CSS] Transform, Transition, Animation

 

 

1. Transform

- Transform

: 어떤 오브젝트의 각도 / 크기 / 위치 조절할 때 사용

 

1) rotate(45deg)

: 입력한 각도만큼 회전

: 평면적인 회전 의미

: 음수 가능

 

2) scale(2, 3)

: 확대/축소

: 숫자는 비율  ex) width=2배, height=3배

: 축소하고 싶은 경우, 0.5 처럼 소숫점 입력

: scale의 기준점은 기존 박스의 정가운데

 

3) skew(10deg, 20deg)

: 입체적으로 각도를 비틀 때 사용

: (x축 , y축)

: 음수 가능

 

4) translate(100px, 200px)

: 위치 조절 및 변경

: (x축, y축)

: 음수도 가능

: 단위는 px, %, em 등.. 가능

 

cf.) transform을 여러 개 사용하면, 마지막 것만 적용됨

 

 

- prefix 접두사

: prefix를 써주면 다른 버전의 브라우저에서 실행됨

: transform만 적은 코드랑 prefix를 적은 코드가 같이 있어야 함

 

1) -webkit- : 크롬, 사파리

2) -moz- : 파이어폭스

3) -ms- : 익스플로러 9.0

4) -o- : 오페라

 

 

2. Transition

- Transition

: 변화하는 과정을 보여주고자 할 때 사용

 

1) (transition-)property

: 효과를 적용하고자 하는 css 속성 (대상)

: ex) width, background-color ...

 

2) (transition-)duration

: 효과가 나타나는 데에 걸리는 시간

: ex) 2s = 2초 동안 (s=second)

 

3) (transition-)timing-function

: 효과의 속도

: 다양한 속도의 성격을 규정할 때 사용

: ex) ease / linea / ease-in / ease-out / ease-in-out

 

4) (transition-)delay

: 특정 조건 하에 효과 발동

: ex) 1s = 1초 후

 

5) 가상선택자:hover

: 마우스를 올렸을 때

 

cf.) transition: width 2s linear 1s;

: 한 줄로 정의 가능

: 순서는 상관이 없지만, 앞의 숫자 = duration / 뒤의 숫자 = delay

: 숫자가 하나인 경우, 무조건 duration

 

cf.) transition: all 1s;

: all 이라고 써준 것은 해당 선택자의 모든 것에 적용하겠다는 의미

 

 

3. Animation

- Animation

: 특정 조건 없이 어떤 이벤트를 적용하고자 할 때 사용 (로딩화면에 많이 사용)

 

1) (animation-)name

: 애니메이션 이름 정의 (개발자가 임의로 작성)

 

2) (animation-)duration

: 애니메이션 지속 시간

 

3) (animation-)timing-function

: 애니메이션 속도 곡선 제어하는 속성

: ease / linear / ease-in / ease-out / ease-in-out

 

4) (animation-)delay

: 애니메이션 지연 시간 제어

 

5) (animation-)iteration-count

: 애니메이션 반복 횟수

: 무한으로 반복하고 싶으면 속성값으로 infinite 넣어주기

 

6) (animation-)direction

: 애니메이션 진행 방향

: alternate = 시작 → 끝 → 시작 (반복효과 적용하고자 할 때 사용)

: normal = 시작 → 끝

: reverse = 끝 → 시작

 

+) animation-fill-mode / animation-play/state

 

cf.) animation도 한 줄로 작성 가능 (앞의 숫자 = duration / 뒤의 숫자 = delay)

 

cf.) @keyframes 애니메이션이름 {  → 애니메이션을 적용하고자 할 때 무조건 @keyframes 명령어 필요

        from {width: 300px; }  → 시작지점

        to {width: 600px; }  → 끝지점

    }

 

 

4. Transform & Animation

- prefix 작성 시 유의사항

: animation도 prefix 사용 가능

: .box1 {

      -webkit-animation: abc 3s linear 1s 6 normal;  → animation에 prefix 작성

}

 

@-webkit-keyframes abc {  → keyframes에도 쌍으로 prefix를 써줘야 함

      from {-webkit-transform: rotate(-100deg); }  → 여기도 prefix 써줘야 함

      to {-webkit-transform: rotate(-10deg); }

}

 

cf.) 마우스를 올렸을 때와 같은 조건이 붙으면 = transition / 자동으로 실행되는 효과 = animation