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>
No Comments on 드롭다운 메뉴 버튼 css animation 효과(rotate/사진전환) 만들기