드롭다운 메뉴 버튼 css animation 효과(rotate/사진전환) 만들기 January 28, 2017

rotate 효과는 animation keyframe을 통해서, opacity를 통한 부드러운 사진 전환은 transition을 이용함.

• animation { content:url() }이미지 전환은 현재 크롬만 가능하고, 부드러운 전환을 할 수 없다. 퍽! 바뀐다. 고로 포기하고, transition을 사용함. 물론 background-image를 사용해도 되지만, 손댈 코드가 더 많아서 포기.
• animation 의 100% 상태를 유지하기 위해서 animation-fill-mode:forwards를 이용. 안그러면 100% 완료후 초기선언상태로 돌아감.
• transition-property : opacity를 사용해 이미지 두장을 겹치고, 윗장사진을 opacity 전환한다. 별도의 z-index 설정이 없다면, 나중에 선언한 엘레먼트가 상단에 위치하므로, class="top"을 선언했다.

<div id="title">
    <p class="center_title">COUNSELING</p>
    <p class="center_copy">온라인상담</p>
    <div class="right">
        <a href="javascript:fnOpenQuickMenu();">
            <img src="image2.png">
            <img class="top" src="image1.png">
        </a>
    </div>
</div>


<style>
/* animation 효과는 transform:rotate를 이용하고, opacity는 transition으로 준다. */
title .right img {position:absolute; }

title .right a img.on{
animation-name : btn_rotate;
-webkit-animation-name : btn_rotate;
-moz-animation-name : btn_rotate;
-ms-animation-name : btn_rotate;
-o- animation-name : btn_rotate; 

animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o- animation-duration: 1s;

animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o- animation-fill-mode: forwards;

}
title .right a img.top {
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o- transition: opacity 1s ease-in-out;
}

title .right a img.top.on {
opacity:0;
}

title .right a img.off{
animation-name : btn_rotate_back;
-webkit-animation-name : btn_rotate_back;
-moz-animation-name : btn_rotate_back;
-ms-animation-name : btn_rotate_back;
-o- animation-name : btn_rotate_back; 

animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o- animation-duration: 1s;

animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o- animation-fill-mode: forwards;

}

@keyframes btn_rotate {
to {
transform : rotate(180deg);
-webkit-transform : rotate(180deg);
/* content:url(image2.png); */
}
}
@keyframes btn_rotate_back {
from{
transform : rotate(180deg);
-webkit-transform : rotate(180deg);
/* content:url(image2.png); */
}
to {
transform : rotate(0deg);
-webkit-transform : rotate(0deg);
/* content:url(image1.png); */
}
}
</style>