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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Transitions ======
<WRAP left notice 70%>
  * description : CSS Transitions 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-21
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====The source of this article==== 
[[https://www.w3schools.com/css/css3_transitions.asp|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 ====
<code css>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
</code>
\\
transition 효과는 지정한 %%CSS%% 속성 (너비)이 값을 변경할 때 시작합니다.\\
이제 사용자가 %%<div>%%요소에 마우스를 올릴 경우 너비 속성에 대한 새로운 값을 지정합니다.\\

==== Example ====
<code css>
  <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>
</code>
\\
마우스 커서가 요소 밖으로 나가면, 점차 기존 스타일로 다시 변경되는 것을 확인하세요\\

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

===== Example =====
<code css>
  <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>
</code>

===== 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 ==== 
<code css>
 <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>
</code>

===== Delay the Transition Effect =====
''%%transition-delay%%'' 속성은 transition 효과에 대한 초 단위의 지연(delay)을 지정합니다.\\
\\
아래의 예제에서 시작하기 전 1초의 지연을 확인하세요.\\

==== Example ====
<code css>
  <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>
</code>

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

==== Example ====
<code css>
  <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>
</code>

===== More Transition Examples =====
%%CSS%% transition 속성은 아래와 같이 각각 1개씩 지정할 수 있습니다.\\
<code css>
  <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>
</code>
\\
또는 아래와 같이 약식 속성 ''%%transition%%''을 사용할 수도 있습니다.\\
<code css>
  <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>
</code>

===== 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)을 지정합니다.      |





































  
{{tag>오션, CSS Transitions}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
