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. jimmyzip
    0.5s를 0 떼고 .5s로 써도 되네요!!

    a{

    transition : all .5s;

    }
  2. 아침해
    속성별로 duration, delay, timing-function 등을 따로 적용하고 싶을 때는 transition-property에 , 를 써서 표현해야 작동하네요.

    transition-property: transform, font-size;
    transform: translate(50px, 50px);
    font-size: 2rem;
    transition-duration: 3s, 3s;
    transition-delay: 1s, 3s;
    transition-timing-function:ease-in,steps(4);
  3. illliilllliillliii
    감사합니다 !!!
  4. 와 정말 이해하기 쉽게 설명해주시네여!
    혼자 이거 저거 찾아보고 있었는데 영상보고 확실히 이해하고 갑니다!
    감사합니다!!
  5. 아리시마
    시작할때 검은색에서 하얀색으로 바뀌면서 실행되는게 상당히 멋지군요 ㅎㅎ
  6. php가 첫취업?
    굉장히 좋은 기능이네요
  7. 오옷
  8. 임지호
    transition : 장면 전환은 부드럽게 할 수 있는 기능
    -property : 어떤 속성에 transiton을 적용할 것인지(all or 특정 속성(transform, font-size 등)
    -duration : 몇 초에 걸쳐 전환할 것인지
    transition : 위의 두 개의 속성의 축약형(transform 1s, font-size 2s 이렇게 두 개 나눠서 적용도 가능)
    -delay : 처음에 시간차를 두고 전환
    -timing-function : 장면전환속도를 균일하지 않게(ceaser 사이트 참고)

    굉장히 맘에 드는 기능이다!
  9. 지선
    감사합니다/~!!!!!!!!!!!!1
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기