[CSS] Transition 을 이용한 애니메이션

CSS의 transition 을 사용하면 간단한 것부터 복잡한 애니메이션 효과를 만들 수 있다.

간단한 예시는 아래를 참고하고, 자세한 내용은 맨 아래에 링크된 글을 참고한다.

.btn-default {
    display:inline-block;
    padding: 5px 20px;
    background-color:#E5E5E5;
    border:1px solid #AAA;
    cursor:pointer;
    -webkit-transition:background-color .5s;
    transition:background-color .5s;
}

.btn-default:hover {
    background-color:#AAA;
}

 

※참고. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions