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. sowhat
    크...정말 좋은 강의 감사합니다.
  2. 스페이스몽키
    감사합니다!!
  3. 이현석
    transition을 적용할 대상을 정하는 것인데 font-size 와 transfom을 적었기 때문에 글자의 사이즈(font-size)와 transform으로 준 변화에대해 적용한다는 말입니다.

    예를 들어 :hover의 효과에 fnot-size를 10pt했고 transfom:rotato(o.5turn)값을주어 회전 시키고 background color를 black주었다면 이 셋효과중 transiton효과가 먹히는 것은 transition-property로 지정하였던 font size와 transform입니다.

    즉 부드럽게 변하는 것은 글자의 크기와 각도 뿐이고 배경의 컬러는 그냥 깜박이듯 바뀌겠죠
    대화보기
    • 바실로마첸코
      transition-property: font-size transform

      이건 어떤 의미인가요? 글자 크기가 변했을때만 전환하는거 맞음?
    • 바실로마첸코
      왜이리 어려워요 이고잉님 ㅠㅠㅠㅠ어려워 죽겠어요
    • 박신우
      transition도 대박이네요 나중에 제 개인 블로그 만들때 꼭 적용해보겠습니다
    • 푸른하늘
      12일차 공부 감사합니다
    • 오빠는다르다
      감사합니다~!!!!!!
    • jimmyzip
      0.5s를 0 떼고 .5s로 써도 되네요!!

      a{

      transition : all .5s;

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

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