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. 쿵투
    CSS 10년전에 한번 들어다보고 말았는데
    현시대 CSS는 핵무기를 장착했따
  2. 김민영
    완료
  3. ㅅㅈㅎ
    감사합니다!!
  4. sowhat
    크...정말 좋은 강의 감사합니다.
  5. 스페이스몽키
    감사합니다!!
  6. 이현석
    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 자세히 보기