CSS 전환 transition

jsleeg98·2020년 5월 23일
0

CSS

목록 보기
7/12

전환 transition

전환은 element가 조건에 따라 변화할 때 어떤 element를 변화시킬지, 어떻게 변화시킬지를 설정하는 기능이다.

  • transition-property : all; - transition을 할 element를 지정할 수 있다. 모두는 all, 여러개는 띄어쓰기로 구분해서 설정한다.
  • transition-duration : 1s; - transition이 이루어지는 시간을 설정한다.
  • transition-delay : 1s; - transition을 늦추는 설정을 한다.
  • transition-timing-function : ease; - ease가 기본값이며 그 외에는 linear, cubic-bezier()를 사용하여 설정할 수 있다.
    참고 사이트 Ceaser
  • transition : all 0.1s; - 한번에 설정할 수 있다.

transition 예시1 - hover 사용

<!doctype html>
<html>
<head>
    <style>
        #test{
            font-size: 3rem;
            display : inline-block;
            transition-property: all;
            transition-duration: 1s;
            transition-delay: 0.5s;
            transition-timing-function: linear;
        }
        
        #test:hover{
            transform : translate(20px,20px);
            font-size : 2rem;
        }
    </style>
</head>
<body>
    <div id="test"> hello </div>
    
</body>
</html>
  • 유의할 점
    • transform은 element가 block-level 이거나 inline-block일 때만 동작하기 때문에 display : inline-block;으로 설정 해주어야 한다.
    • hover는 마우스를 올려두었을 때 active는 마우스로 클릭했을 때 동작한다는 의미다.

transition 예시2 - javascript 사용

<!doctype html>
<html>
<head>
    <style>
        body{
            background-color: powderblue;
            transition : all 2s;
        }
        div{
            background-color: powderblue;
            color: white;
            width: 400px;
            height: 200px;
            font-size: 2rem;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
    
    <div>transition</div>
</body>
</html>
  • 화면 로드가 다 되면 body의 배경이 powderblue로 2초 동안 변화되는 기능이다.

참고 사이트

0개의 댓글