연습장

14. Transition 트랜지션 본문

CSS3

14. Transition 트랜지션

js0616 2024. 6. 29. 15:32

https://poiemaweb.com/css3-transition

 

CSS3 Transition | PoiemaWeb

트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티

poiemaweb.com

 

 

 

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

 

ex)

div 요소는 기본 상태에서 hover 상태로 변화할 때, CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화한다.

 

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
    }
    div:hover {
      border-radius: 50%;
      background: blue;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

 

hover 시 즉시 변화

 

HOVER

 

 

 

 

트랜지션 효과를 부여

  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
      transition: all 2s;
    }
    div:hover {
      border-radius: 50%;
      background: blue;
    }

  </style>

 

HOVER

 

 

 

다음과 같이 transition 을 hover 에 넣게 되면 

hover 시에는 천천히 변화하지만 hover off 하게 되면 즉시 돌아온다. 

  <style>
    .div {
      width: 100px;
      height: 100px;
      background: red;
      /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
     
     
    }
    .div:hover {
      border-radius: 50%;
      background: blue;
      transition: all 2s;
    }

  </style>
HOVER

 

 

 

transition은 자동으로 발동되지 않는다. 

  • :hover와 같은 가상 클래스 선택자(Pseudo-Classes)
  • JavaScript의 부수적인 액션에 의해 발동한다
  • 트랜지션이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용

 

 

 

1. transition-property
transition-property 프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다. 

지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다. 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.

 

아래와 같은 경우 

width : trainsition 적용

background-color : 즉시 파란색으로 변경

  <style>
    div {
      width: 100px;
      height: 50px;
      background-color: red;
      margin-bottom: 10px;
      transition-property: width ;
      transition-duration: 2s, 2s;
    }
    div:hover {
      width: 300px;
      background-color: blue;
    }
  </style>
HOVER

 

 

 

주의해야 할 사항은 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다는 것이다.

 width, font-size, background-color 등은 하나의 범주(width, font-size는 크기, background-color는 색상)안에서 값이 변화하지만 display 프로퍼티는 그렇지 않다.

 

 

Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing


Background
background-color background-position


좌표
top left right bottom


텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing


기타
opacity outline-color outline-offset outline-width
visibility z-index

 

 

요소의 프로퍼티 값이 변화하면 layout 작업을 수행하게 되는데,

이는 성능 저하의 요인이 되며 layout에 영향을 주는 트랜지션 효과는 회피하도록 노력해야 한다.

 

layout에 영향을 주는 프로퍼티는 다음과 같다.  (위의 프로퍼티와 겹치는 부분)

 

width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space

 

 

2. transition-duration
transition-duration 프로퍼티는 트랜지션에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없다.

 

 

transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다.

아래의 경우, width 프로퍼티는 2초, opacity 프로퍼티는 4초의 지속시간을 갖는다.

div {
    transition-property: width, opacity;
    transition-duration: 2s, 4s;
  }
 

 

 

 

또한 transition 프로퍼티만으로 축약 표현이 가능하다.

div {
    /* shorthand syntax */
    transition: width 2s, opacity 4s;
  }
 

 

 

 

3. transition-timing-function
트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.

 

ease : 기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear : 시작부터 종료까지 등속 운동을 한다.
ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out : 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-out : ease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

 

 

 
div {
    transition: width 2s;
    transition-timing-function: ease;
  }
 

 

 

4. transition-delay

즉시 트랜지션이 실행되지 않고, 일정 시간 대기한 후 트랜지션이 실행되도록 한다.

 

 
div {
    transition: width 2s;
    transition-timing-function: ease;
    transition-delay: 1s;
  }
 

 

 

5. transition
모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand이다. 

값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.

transition-duration 을 지정하지 않는 경우 기본값 0이 셋팅되어 어떠한 트랜지션도 실행되지 않는다.

 

기본값은 아래와 같다.

 
 transition: property duration function delay
 
 transition: all 0 ease 0
 

 

 

트랜지션 효과를 블로그에서 보여주기 위해서 티스토리 html 모드를 건들였는데 

수정할때마다 css가 사라져서 조금 불편한듯하다. 테마를 선택해서 날라가는거 같기도한데..

유저 개인의 css를 따로 저장하는곳이 있을까.. 

'CSS3' 카테고리의 다른 글

16. Transform 트랜스폼  (0) 2024.06.29
15. Animation 애니메이션  (0) 2024.06.29
13. Gradient 그레이디언트  (0) 2024.06.29
12. Shadow그림자  (0) 2024.06.29
11. Vendor Prefix 벤더 프리픽스  (0) 2024.06.29
'CSS3' Related Articles more