[css] transition 이해하기

 

 

transition의 필수 조건

- CSS 속성 지정

- 효과 유지 시간

 

transition:all 1s;

 

 

 

지금까지의 작업은 대체로 hover 했을 때 transition을 사용하였는데,

이를 응용하여 해당 페이지에 들어가면(도달하면) transition 효과가 나타나도록 할 수 있다.

hover 하지 않고 바로 효과가 나오는 것에 대해 이해가 조금 힘들었는데, 다음 그림을 참고하였다.

 

 

 

 

 

일반적으로 hover로 transition을 사용할때는 다음과 같다.

div{
	width:100px;
    height:100px;
    background-color:red;
    transition: all 1s;
}
div:hover{
	background-color:blue;
}

 

 

 

 

자동으로 transition 효과가 나타나게 하려면 여러가지 방법이 있으나,

이번 작업에서는 본문은 그대로 두고 효과 별 클래스를 따로 지정해서 작업하였다.

.transition .design{
	/* original design */
}

.effect{
	/* initial state */
    /* transition, transition-delay, transform, opacity and so on */
 }
 
 .active .effect{
 	/* final state */
}

 

 

예시 )

/* initial states */

.fadein {
    opacity: 0;
    transition: opacity 2s;

    @for $i from 1 through 5 {
        &_d#{$i} {
            transition-delay: 0.5s*$i;
            @extend .fadein;
        }
    }
}

/* final states */
.active {
    .fadein {
        opacity: 1;
    }
}

 

원하는 페이지에 새로운 클래스(ex, active)를 부여하여 initial state와 final state를 구분한다.

다만 js를 이용하여 해당 클래스 추가를 해주어야 한다.

 

위치값이 변하는 경우, margin/padding 혹은 position의 위치값을 변경하는 것이 아닌 transform의 translate 속성을 이용하고,

너비나 높이의 경우, transform의 scale을 이용한다.

때에 따라 line-height를 이용할 수도 있다.

scale을 이용할 때에는 transform-origin 속성을 이용하여 기준점을 이동하면 된다.

( transform-origin 참고 : www.tabmode.com/homepage/transform-origin.html#gsc.tab=0 )

 

가상선택자에 트랜지션을 주는 경우에는 클래스를 추가할 수 없으므로 본문에 바로 추가해서 작업하였다.

border-bottom 에 트랜지션을 주어야하기도 했는데,

그럴때는 가상선택자로 border-bottom만 따로 띄운 후 작업하였다.

( border-bottom 참고 : stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border )

 

 

아직 미숙하지만 이전 포폴 준비하며 봤던 수많은 사이트에서 본 효과들의 원리를 조금이나마 이해할 수 있게되었다.