CSS

전환(transition)

소개

전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다. 

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

전환의 기본 사용법

 예제 - transition_1.html

<!doctype html>
<html>
<head>
  <style>
    a{
      font-size:3rem;
      display:inline-block;
/*
      transition-property: font-size transform;
      transition-duration: 0.1s;
      transition:all 0.1s;
*/
      transition:all 0.1s;
    }
    a:active{
      transform:translate(20px, 20px);
      font-size:2rem;
    }
  </style>
</head>
<body>
  <a href="#">Click</a>
</body>
</html>

codepen.io

전환의 심화내용 

예제 - transition_2.html

<!doctype html>
<html>
<head>
  <style>
    body{
      background-color: black;
      transition:all 1s;
    }
    div{
      background-color: black;
      color:white;
      padding:10px;
      width:100px;
      height:50px;
      -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */

      -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    }
    div:hover{
      height:400px;
    }
  </style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
  <div>
    TRANSITION
  </div>
</body>
</html>

 

참고

댓글

댓글 본문
작성자
비밀번호
  1. 지선
    감사합니다/~!!!!!!!!!!!!1
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기