간단한 hover 애니메이션 효과

HTML:

<div id="demo1" class="demo">demo1</div> 

<div id="demo2" class="demo">demo2</div>

 
CSS:

.demo {

    width: 100px;

    height: 100px;

    text-align: center;

    line-height: 100px;

    border: 10px solid #ccc;

    border-radius: 60px;

    font-size: 20px;

    -webkit-backface-visibility: hidden

}

#demo1 {transition: border-color .3s ease}

#demo1:hover {border-color: #a3d7ff}

#demo2 {transition: all 1s ease}

#demo2:hover {background-color: #a3d7ff;transform: rotate(360deg);transition: background-color .3s ease}

주: 만약 효과가 보이지 않는다면 서로 다른 브라우저의 접두사 파라미터를 직접 추가하여 읽기 편리하도록 생략합니다.
일반 상태에서 부상 상태로 갈 때 두 가지 효과가 일치한다. 즉,normal->hover 순방향 애니메이션 과도•부상에서 이동 상태로 쓸 때hover에 쓰인transition 효과는 일종의 전환(normal->hover 순방향 애니메이션 과도,hover->normal 역방향 애니메이션 과도)이지만 일반 상태에 쓰인transition은 빠르게 사라지고 조금의delay도 없다. 즉,hover->normal에서 어떠한 과도도 없습니다.