[CSS3] Transition 속성

Transition

<style>
    .transition {
        transition-property: width;
        transition-duration: 2s;
    }
</style>

property

• 효과를 적용하고자 하는 css 속성

duration

• 효과가 나타나는데 걸리는 시간

 

<style>
    .transition {
        transition-timing-function: linear;
        transition-delay: 1s;
    }
</style>

timing-function

• 효과의 속도
• linear은 '일정하게' 라는 의미

delay

• 특정 조건 하에서 효과 발동
• 1s는 '1초 후' 라는 의미

 

<style>
    .transition: hover { width: 300px; }
</style>

가상 선택자 : hover

• css에서 미리 만들어 놓은 클래스
• '마우스를 올렸을 때' 라는 조건

 

Transition을 효과적으로 사용하기

<style>
    .transition {
        transition: width 2s linear 1s;
    }
    .transition: hover { width: 300px; }
</style>

• 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동
• 순서는 상관이 없지만, 숫자의 경우 먼저 나온 것이 duration, 뒤에 나온 것이 delay