Day67 - [css]transition

이번에는 css의 transition 에 대해서 알아 봅시다.

 

transition

transition 은 변하도록 해주는 속성 인데요, 예를 들어서, 마우스를 가져다 대면, 그래프가 바뀐다 거나, 특정 입력란에 포커스를 하면, 그 입력란의 크기가 변한다거나 하는 ....

 

transition : css속성, 시간, 딜레이

 

라고 생각을 하시면 되겠습니다.

 

예제.

<div class="replay-content"> <!-- 컨텐츠영역 -->
	<textarea class="form-control form-text"></textarea> <!-- 부트스트랩 style 사용 -->
</div>

위와 같이, 이러한 텍스트 에리어 가 있을 때, 아래와 같이 css 스타일을 적용해 주면 됩니다.

.replay-content > .form-text {
    resize: vertical;
    width: 100%;
    min-height: 100px;

    transition: min-height 2s ease-in-out;
}

.replay-content > .form-text:focus {
    min-height: 150px;
}

css속성 에는, 어떠한 속성을 변화시킬 것인지 넣어주면 되는데, all 을 넣으면 영역에 존재하는 모든 속성을 의미합니다.

 

오늘은 이렇게 transition 을 알아 보았습니다.