문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_transitions
wiki:css:css_note:css_transitions

목차

CSS Transitions

  • description : CSS Transitions
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-07-21



The source of this article

CSS Transitions

CSS Transitions

CSS transitions는 설정한 시간 동안 속성 값이 부드럽게 변화하게 합니다.

이번 챕터에서는 아래와 같은 속성들을 학습합니다.

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

How to Use CSS Transitions?

transition 효과를 만들기 위해, 다음의 두 가지를 지정해야 합니다.

  • 효과를 주기 위한 CSS 속성
  • 효과의 지속 시간(duration)

Note: 지속 시간이 지정되지 않는 경우, transition은 기본 값이 0이기 때문에 효과가 없습니다.

아래의 예제는 레드 컬러의 100px * 100px <div> 요소를 보여줍니다.
<div> 요소는 또한 2초의 지속 시간을 가진 너비 속성에 대한 transition 효과를 지정합니다.

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}


transition 효과는 지정한 CSS 속성 (너비)이 값을 변경할 때 시작합니다.
이제 사용자가 <div>요소에 마우스를 올릴 경우 너비 속성에 대한 새로운 값을 지정합니다.

Example

  <title>The transition Property</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition: width 2s;
    }
 
    div:hover {
      width: 300px;
      /* 마우스 오버시 너비가 2초의 시간동안 100px에서 300px로 확장됩니다. */
    }
  </style>
</head>
 
<body>
 
  <h1>The transition Property</h1>
 
  <p>Mouse over the div element below, to see the transtion effect:</p>
  <div></div>
 
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
</body>


마우스 커서가 요소 밖으로 나가면, 점차 기존 스타일로 다시 변경되는 것을 확인하세요

Change Several Property Values

아래의 예제는 너비에 대한 2초의 지속 시간과 높이에 대한 4초의 지속 시간 설정으로
너비와 높이 속성에 대한 transition 효과를 추가합니다.

Example

  <style>
    div {
      width: 100px;
      height: 100px;
      background: crimson;
      transition: width 2s, height 4s;
      /* 지속시간 : 너비 2초, 높이 4초 */
    }
 
    div:hover {
      width: 300px;
      /* 너비 300px로 확장 */
      height: 300px;
      /* 높이 300px로 확장 */
    }
  </style>
</head>
 
<body>
 
  <h1>The transition Property</h1>
 
  <p>Hover over the div element below, to see the transition effect:</p>
 
  <div></div>
 
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier version.</p>
 
</body>

Specify the Speed Curve of the Transition

transition-timing-function 속성은 transition 효과의 속도 곡선(speed curve)을 지정합니다.

transition-timing-function 속성은 아래의 값들을 가질 수 있습니다.

  • ease - slow start, then fast, then end slowly의 transition 효과를 지정합니다. (기본 값)
  • linear - 시작부터 끝까지 동일한 속도로 transition 효과를 지정합니다.
  • ease-in - slow start로 transition 효과를 지정합니다.
  • ease-out - slow end로 transition 효과를 지정합니다.
  • ease-in-out - slow start와 slow-end로 transition 효과를 지정합니다.
  • cubic-bezier(n,n,n,n) - 3차 베지어 함수(cubic-bezier function)에서 고유한 값을 정의할 수 있습니다.


아래의 예제에서 사용할 수 있는 다양한 속도 곡선을 확인합니다.

Example

 <title>The transition-timing-function Property</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: crimson;
      transition: width 2s;
    }
 
    #div1 {transition-timing-function: linear;}
    #div2 {transition-timing-function: ease;}
    #div3 {transition-timing-function: ease-in;}
    #div4 {transition-timing-function: ease-out;}
    #div5 {transition-timing-function: ease-in-out;}
 
    div:hover {
      width: 300px;
    }
  </style>
</head>
 
<body>
 
  <h1>The transition-timing-function Property</h1>
 
  <p>Hover over the div element below, to see the different speed curves:</p>
 
  <div id="div1">linear</div><br>
  <div id="div2">ease</div><br>
  <div id="div3">ease-in</div><br>
  <div id="div4">ease-out</div><br>
  <div id="div5">ease-in-out</div><br>
 
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
</body>

Delay the Transition Effect

transition-delay 속성은 transition 효과에 대한 초 단위의 지연(delay)을 지정합니다.

아래의 예제에서 시작하기 전 1초의 지연을 확인하세요.

Example

  <style>
    div {
      width: 100px;
      height: 100px;
      background: crimson;
      transition: width 3s;
      transition-delay: 1s;
    }
 
    div:hover {
      width: 300px;
    }
  </style>
</head>
 
<body>
 
  <h1>The transition-delay Property</h1>
 
  <p>Hover over the div element below, to see the transition effect:</p>
 
  <div></div>
 
  <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
 
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions</p>
 
</body>

Transition+ Transformation

아래의 예제에서 transformation(변환)에 transition 효과 추가를 확인합니다.

Example

  <title>Transition + Transform</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: brown;
      transition: width 2s, height 2s, transform 2s;
    }
 
    div:hover {
      width: 300px;
      height: 300px;
      transform: rotate(180deg);
    }
  </style>
</head>
 
<body>
 
  <h1>Transition + Transform</h1>
 
  <p>Hover over the div element below:</p>
 
  <div></div>
 
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
</body>

More Transition Examples

CSS transition 속성은 아래와 같이 각각 1개씩 지정할 수 있습니다.

  <title>The transition Properties Specified One by One</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: brown;
      transition-property: width;
      transition-duration: 2s;
      transition-timing-function: linear;
      transition-delay: 1s;
    }
 
    div:hover {
      width: 300px;
    }
  </style>
</head>
 
<body>
 
  <h1>The transition Properties Specified One by One</h1>
 
  <p>Hover over the div element below, to see the transition effect:</p>
 
  <div></div>
 
  <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
</body>


또는 아래와 같이 약식 속성 transition을 사용할 수도 있습니다.

  <title>Using The transition Shorthand Property</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: brown;
      transition: width 2s linear 1s;
    }
 
    div:hover {
      width: 300px;
    }
  </style>
</head>
 
<body>
 
  <h1>Using The transition Shorthand Property</h1>
 
  <p>Hover over the div element below, to see the transition effect:</p>
 
  <div></div>
 
  <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
 
  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
 
</body>

CSS Transition Properties

아래의 테이블 목록은 모든 CSS transition 속성들을 보여줍니다.

Property Description
transition 4개의 transition 속성을 단일 속성으로 설정하기 위한 약식 속성
transition-delay transition 효과에 대한 지연 시간( 초 시간)을 지정합니다.
transition-duration transition 효과가 적용될 초 또는 밀리 초 시간을 지정합니다.
transition-property transition 효과를 적용하기 위한 CSS 속성 이름을 지정합니다.
transition-timing-function transition효과의 속도 곡선(speed curve)을 지정합니다.
, ,
/volume1/web/dokuwiki/data/pages/wiki/css/css_note/css_transitions.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki