[HTML/CSS] Transform , Transition, Animation

/* 이 포스팅은 '앨리스 동남권 웹개발 온라인 부트캠프' 과정을 공부하면서 정리한 것입니다. */

Transform , Transition, Animation 이 세가지는 모두 웹사이트에 움직임과 관련한 다양한 효과를 주는 CSS 효과로, CSS3에서 새롭게 추가된 신조어.

1. Transform

: 오브젝트의 각도를 틀거나 위치를 변경하는 등의 작용을 합니다.

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>CSS Transform</title>
  
  <style>
    .transform {
    	/* 가로 100, 세로 100의 빨간색 도형 */
        width: 100px;
        height: 100px;
        background-color: red;

		/* 도형이 변하는 모습을 확인하기 쉽도록 top과 left에 여백을 줌. */
        margin: 200px 0 0 200px;  // top right bottom left

        transform: rotate(45deg);
        transform: scale(2, 3);
        transform: translate(100px, 200px);
        transform: skew(10deg, 20deg);  /* 마지막 transform 속성만 적용됨 */

        /* 하위버전 브라우저들을 고려하여 prefix 붙이기.
        항상 최신버전 브라우저에서만 돌아가도록 할거라면 없애도 됨. */
        -webkit- transform: skew(10deg, 20deg);
        -moz- transform: skew(10deg, 20deg);
        -ms- transform: skew(10deg, 20deg);

    }
  </style>
  
</head>
<body>

  <div class="transform"></div>

</body>
</html>

2. Transition

: 변화하는 과정을 보여줌.

Transition은 아래의 4가지 속성으로 구성됩니다.

- property : 어떤 효과를 나타낼지

- duration : 소요시간

- timing-function : 속도 패턴 (ex. linear -> 일정하게 선형으로)

- delay : 지연시간

사용예시입니다.

    .transition {
	transition-property: width;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 1s;
    }

이것을 아래처럼 한줄로 줄여서 표현할 수도 있습니다.

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

이렇게 쓸 때는, property, duration, timing-function, delay들의 순서는 상관이 없습니다.

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

이렇게 순서를 뒤섞어도 똑같이 작용합니다.

다만 주의할 점은

시간 요소인 duration과 delay를 같이 쓰려면 반드시 duration이 먼저 와야 한다는 겁니다.

즉 시간요소를 하나만 쓴다면 그것은 무조건 duration이라고 취급하고,

시간요소를 두개를 썼다면 무조건 앞의 것이 duration이라고 취급한다는 것입니다.

    .transition {
        transition: width 2s linear;
    }

여기서는 시간이 2s 하나밖에 없으므로 duration: 2s 로 적용됩니다. delay는 없는 셈이예요.

한 가지 더 특이한 사항, transition에는 가상 선택자 :hover가 있습니다.

가상 선택자란, CSS에서 미리 만들어놓은 선택자입니다. 가상선택자에는 다양한 것들이 있지만 '마우스를 올렸을 때'라는 조건을 담고 있는 hover만 살펴봅니다.

<style>

  .transition:hover {
      width: 300px; 
  }

</style>

위 구문은 transition이라는 class를 가지는 태그들은 '(hover)마우스를 올렸을 때' 가로가 300px로 바뀐다 라는 의미입니다.

보통 html내에서 어떤 부분에 마우스를 올렸을 때 모양이나 위치가 스르륵 바뀌는 효과를 내려고 할 때가 대부분이므로 transition은 hover라는 가상 선택자와 자주 붙어다닌다고 생각하면 되겠습니다.

마우스를 올렸을 때 색상이 바뀌게 하고 싶다면

.colorChange {
    transition: color 1s;
}

.colorChange:hover {
    color: #323232;
}

바탕색을 바꾸겠다면

.bgColorChange {
    transition: background-color 1s;
}

.bgColorChange:hover {
    background-color: 323232;
}

3. Animation

: 조건에 상관없이 움직이는 효과를 줍니다. (Transition은 마우스 hover했을 때 같은 조건부 애니메이션)

즉, 웹사이트가 열리자마자 효과가 시작됩니다.

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>CSS Animation</title>
  
  <style>

    .animation {
        width: 300px;
        height: 300px;
        background-color: pink;

        animation-name: changeWidth;  // 임의로 지어주는 이름입니다.
        
        animation-duration: 3s;  // 소요시간
        animation-timing-function: linear;  // 속도 패턴
        animation-delay: 1s;  // 지연시간
        // transition의 속성들과 비슷합니다.

        animation-iteration-count: 6;  // 반복횟수
        animation-direction: alternate;  // 반복형태-앞뒤에서 번갈아 반복
    }

	// animation 속성에 필수인 키프레임. from(시작 장면)과 to(끝 장면)로 구성.
    @keyframes changeWidth {	// keyframes 다음에 위에서 정해준 animation 이름이 와야 함
        /* from 1회, to 1회로 카운트되어 6회 반복이지만 총 3번만 반복된다. */
        from { width: 300px; }
        to { width: 600px; }
    }
  </style>
  
</head>
<body>

  <div class="animation"></div>

</body>
</html>

주의할 것은 반복횟수로 6을 주더라도 우리가 볼 땐 6번 왕복하는 것이 아니다.

keyframes의 from에서 to로 가는 것이 1회, to에서 다시 from으로 오는 것이 또 1회 이런식으로 차감되어 갔다가 오는데 2회가 차감되므로 왔다갔다 왕복을 3번 하게 된다는 것이다.

animation도 아래처럼 한 줄로 쓸 수 있다.

.box1 {
    animation: rotation 1500ms linear infinite alternate;
    /* infinite는 무한히 반복하라는 뜻 */
}

1000ms = 1초이므로 1500ms는 1.5초이다.

그 외

아래처럼 animation과 transform을 혼합해서 사용할 수 있습니다.

.box1 {
    animation: expand 1500ms linear infinite alternate;
}

@keyframes expand {
    from { width: 300px; }
    to { width: 600px; }
}

/* transform과 같이 사용 */
.box2 {
    animation: rotation 1500ms linear infinite alternate;
}

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

또한 animation도 하위 브라우저에서 호환이 되도록 하는 prefix들을 붙일 수 있다.

아래처럼 오리지널 코드를 복제한 후 붙여준다.

<style>

    .box1 {
        width: 300px;
        height: 300px;
        background-color: red;

        animation: rotation 1500ms linear infinite alternate;
        -webkit-animation: rotation 1500ms linear infinite alternate;
    }

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

이렇게 animation과 키프레임, 그 안의 from과 to에도 모두 붙여주어야 한다.

transition과 transform을 아래처럼 혼합해서 쓰기도 하는데,

.change {
    transition: all 1s;
}

.change:hover {
    transform: scale(1.2);
}

transition부분이 있어야 scale(1.2)가 서서히 커지고 작아지는 모습으로 보여집니다. 물론 transition에서 설정한대로 1초동안.

transition: all 1s; 에서 all은 모든 옵션. 즉 width, height 등등 모든 옵션에 transition을 적용한다는 뜻.

만약 transition 부분이 없다면 즉시 커졌다 작아졌다를 계속 반복하느라 깜박깜박거린다.

'인간은 어떻게 배울까' 카테고리의 다른 글

[macOS] VS코드에서 한글 깨짐 현상 해결! (1)	2023.06.19
[JS] var와 let의 차이 (2)	2023.06.09
[JS] HTML에 <li> 태그 생성하고 태그의 텍스트 바꾸기 (0)	2023.06.01
[JS] 타이머 timer (0)	2023.06.01
[JS] 이벤트 리스너를 이용해서 속성을 껐다 켰다하기 (toggle) (0)	2023.06.01

아인의 개발자국

[HTML/CSS] Transform , Transition, Animation

1. Transform

2. Transition

3. Animation

그 외

'인간은 어떻게 배울까' 카테고리의 다른 글

티스토리툴바

[HTML/CSS] Transform , Transition, Animation

1. Transform

2. Transition

3. Animation

그 외

'인간은 어떻게 배울까' 카테고리의 다른 글

관련글

티스토리툴바