css - transition

noyo0123·2019년 11월 20일
0

html-css

목록 보기
2/3

css 프로퍼티를 변화시킬때 그 기간을 설정하여 동적인 효과를 내는 속성입니다.

transition-property의 속성값에 all을 적으면 모든 변화를 transition에 적용합니다. 또한, 단일 속성만 transition 적용할 수도 있습니다.

div위에 마우스를 올렸을때 width 변화만 transtion 적용한 예제

	  .box {
        width: 100px;
        height: 100px;
        background-color: lime;
        /* transition: all 3s; */
        transition-property: width; /* 변화할 프로퍼티 속성*/
        transition-duration: 3s; /* 변화 기간 */
        transition-delay: 500ms; /* 변화 시작 하기 전 지연시간 */
        transition-timing-function: linear; /* 변화하는 타이밍을 조절할 수 있습니다. cubic-bezier()를 검색합니다.*/
      }

      .box:hover {
        width: 100%;
        height: 200px;
        background-color: blue;
      }

단계별로 transition을 적용할 수도 있습니다.
div위에 마우스를 올렸을때 적용한 예제

#wrap {
        width: 900px;
        margin: 0 auto;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: lime;
        /* transition: all 3s; */

        transition-property: width; /* 변화할 프로퍼티 속성*/
        transition-duration: 3s; /* 변화 기간 */
        transition-delay: 500ms; /* 변화 시작 하기 전 지연시간 */
        transition-timing-function: linear; /* 변화하는 타이밍을 조절할 수 있습니다. cubic-bezier()를 검색합니다.*/

        transition: width 3s linear, height 1s 3s, background-color 2s 4s;
      }

      .box:hover {
        width: 100%;
        height: 200px;
        background-color: blue;
      }

code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
      }
      #wrap {
        width: 900px;
        margin: 0 auto;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: lime;
        /* transition: all 3s; */

        transition-property: width; /* 변화할 프로퍼티 속성*/
        transition-duration: 3s; /* 변화 기간 */
        transition-delay: 500ms; /* 변화 시작 하기 전 지연시간 */
        transition-timing-function: linear; /* 변화하는 타이밍을 조절할 수 있습니다. cubic-bezier()를 검색합니다.*/

        transition: width 3s linear, height 1s 3s, background-color 2s 4s;
      }

      .box:hover {
        width: 100%;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>
profile
자바스크립트를 주언어로 개발을 배우고 있습니다. 서로 아는 것들을 공유해요~

0개의 댓글