[CSS] Transform, Transition, Animation

Transform

rotate(회전)

.box {
	width : 100px;
    height : 100px;
    background-color: aqua;
    transform: rotate(10deg); // deg 단위를 사용한다.
}

scale(크기)

.box {
	width : 100px;
    height : 100px;
    background-color: aqua;
    transform: scale(1, 2); // 가로는 원래 크기, 세로는 2배 커진다.
}

skew(x축, y축 각도만큼 비튼다)

.box {
	width : 100px;
    height : 100px;
    background-color: aqua;
    transform: skew(10deg, 20deg);
}

translate(좌표 변경)

.box {
	width : 100px;
    height : 100px;
    background-color: aqua;
    transform: translate(50px, 30px); // 가로이동, 세로이동
}

Transition

이벤트 핸들러에 의해 실행되는 이벤트이다.

.box {
	transition-property: width;
  	transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
    /* 1초 후 시작 */
}

.box {
	transition : width 2s linear 1s;
}

예시 적용

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  
  transition: width 0.5s;
}

.box:hover {
  width: 200px;
}

Animation

Transition과의 차이점은 이벤트 핸들러 없이 창이 나오면 실행되는 animation이라는 점이다.
@keyframes로 애니메이션의 이름을 정의한다.
그리고 @keyframes는 from, to인자를 가진다.
이 이름은 animation-name에 사용한다.

.box {

    animation-name: changeWidth;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    /* transition의 특성과 같다. */
    
    animation-iteration-count: infinite;
    /* animation 지속 횟수 지정 infinite는 무한 */
    animation-direction: alternate;
    /* alternate = from => to => from
       normal = from => to
       reverse: to => from
       보통 alternate만 사용한다. 왜냐하면 가장 자연스럽게 보인다.
    */
}

@keyframes changeWidth {
    from {
       width: 100px;
    }
    to {
       width: 200px;
    }
}

짧게 쓰면 다음과 같다.

.box {
	animation: changeWidth 1s linear infinite alternate;
}

@keyframes changeWidth {
    from {
       width: 100px;
    }
    to {
       width: 200px;
    }
}

크로스브라우징에 대응하기

• prefix를 붙인다.

HOW?

.box {
  -webkit-transform: rotate(10deg); /* 크롬, 사파리 */
  -moz-transform: rotate(10deg);; /* 파이어폭스 */
  -o-transform: rotate(10deg); /* 오페라 */
}

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  -webkit-animation: rotation 1s linear infinite alternate;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(-10deg);
  }
  to {
    -webkit-transform: rotate(10deg);
  }
}

여기서 중요한 것은 animation, keyframes, transform 모두에 prefix를 붙인 것이다.
다 붙여야 크로스 브라우징에 문제가 없다.