CSS - transition 속성

<div id="wrap">
        <div class="rec"></div>
    </div>

 

이렇게 간단한 div 태그가 있다고 하자.

 

 

 

<style>
        #wrap .rec {
            width:100px;
            height:200px;
            background-color:red;
            transition-duration:3s;
        }
        #wrap .rec:hover {
            width:200px;
            height:100px;
            background-color:green;
        }
        #wrap .rec:active {
            width:200px;
            height:200px;
            background-color:blue;
            border-radius:100px;
        }
    </style>

 

rec 에 transition-duration : 3s 를 설정하면 변화하는데 3초가 걸리게 된다.

그래서 마우스를 올리고 있으면 빨강 사각형 -> 초록 사각형으로 3초 동안 천천히 변한다. (마우스를 떼도 마찬가지)

 

 

:active 는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 

즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미.

 

 

 

 

 

hover 와 active 를 활용하여 간단한 버튼을 만들어 보았다. 여기서는 transition-duration 을 설정하지 않았다.

▼

#wrap .rec {
                width: 50px;
                height: 40px;
                border-radius: 25px;
                background-color: pink;
                box-shadow: 1px 4px 0 gray;
                text-align: center;
                line-height: 40px;
            }
        
            #wrap .rec:hover {
                width: 50px;
                height: 40px;
                border-radius: 25px;
                background-color: #f94968;
                box-shadow: 1px 4px 0 gray;
            }
            #wrap .rec:active {
                width: 50px;
                height: 40px;
                border-radius: 25px;
                background-color: #f94968;
                box-shadow: 0 0;
                box-shadow: 1px 1px 0 gray;
            }

 

 

 

 

---

	#wrap .rec {
                background-color:yellow;
                width:100px;
                height:100px;
                transition-duration:3s;
                transition-delay:2s;
            }
        
            #wrap .rec:hover {
                background-color:green;
                width:200px;
                height:200px;
            }

 

transition-delay 속성은 2초 뒤에 변화하라 는 의미이다.

실행해본 결과 마우스를 올리면 2초 뒤에 변화하며, 마우스를 떼도 2초 뒤에 변화한다.

 

 

 

 

 

 

아래처럼 한꺼번에 지정해 줄 수도 있다.

 

transition-property: background-color, height;
transition-duration:5s, 2s

 

배경 속성은 5초 동안, 높이 속성은 2초동안 변화하라 는 의미이다.

 

 

 

 

 

그 밖의 속성 

• transition-timing-function: ease-in 점점 빨라짐
• ease-out : 그 반대

 

 

 

 

또한 이렇게 한꺼번에 써줘도 가능하다.

 

transition:color .5s ease-in-out;