마우스 오버시 마우스 오버시 반투명 애니메이션 처리

Question

자바 스크립트를 사용하지 않고 마우스 오버시 키 프레임 애니메이션을 되돌릴 수 있는지 궁금합니다 (작업중인 프로젝트에 대한 요구 사항). 나는 애니메이션 방향을 시도했다 : 대체; 애니메이션 방향 : 원래 .molehill 선택기와 molehill : hover> img 선택기를 반대로 실행하면됩니다. 현재 상태에 대해서는 JSFiddle을 참고하십시오. 그러나 본질적으로 두더지는 움직이기 (hover)에 두더지에서 나오기 위해 움직입니다. 마우스를 제거 할 때, 그는 사라,하지만 그는 천천히가는 것처럼 보이는, 그래서 차라리 애니메이션 역을 것이다

HTML :.

<div class="molehill"> 
    <div> 
     <img id="m1" src="http://uf.heatherlaude.com/img_directory/molehill-1.png" alt="mole"> 
    </div> 

    <img id="m2" src="http://uf.heatherlaude.com/img_directory/molehill-2.png" alt="mole"> 
    <img id="m3" src="http://uf.heatherlaude.com/img_directory/molehill-3.png" alt="mole"> 
    <img id="m4" src="http://uf.heatherlaude.com/img_directory/molehill-4.png" alt="mole"> 
    <img id="m5" src="http://uf.heatherlaude.com/img_directory/molehill-5.png" alt="mole"> 
    <img id="m6" src="http://uf.heatherlaude.com/img_directory/molehill-6.png" alt="mole"> 
    <img id="m7" src="http://uf.heatherlaude.com/img_directory/molehill-7.png" alt="mole"> 
    <img id="m8" src="http://uf.heatherlaude.com/img_directory/molehill-8.png" alt="mole"> 
</div> 

CSS :

.molehill { 
    width: 359px; 
    height:250px; 
    position: relative; 
} 

.molehill > img { 
    transition: 1s; 
} 

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8 { 
    position: absolute; 
    width: 100% 
    height: 100%; 

} 

#m2, #m3, #m4, #m5, #m6, #m7, #m8 { 
    opacity: 0; 
} 


.molehill:hover > img { 
    animation-name: molehill_test; 
    -webkit-animation-name: molehill_test; 
    animation-duration: 3.25s; 
    -webkit-animation-duration: 3.25s; 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-iteration-count: 1; 
    -webkit-animation-iteration-count: 1; 
} 

#m2 { 
    animation-delay:.25s; 
    -webkit-animation-delay:.25s 
} 
#m3 { 
    animation-delay:.75s; 
    -webkit-animation-delay:.75s 
} 
#m4 { 
    animation-delay:1.25s; 
    -webkit-animation-delay:1.25s 
} 

#m5 { 
    animation-delay:1.75s; 
    -webkit-animation-delay:1.75s 
} 
#m6 { 
    animation-delay:2.25s; 
    -webkit-animation-delay:2.25s 
} 
#m7 { 
    animation-delay:2.75s; 
    -webkit-animation-delay:2.75s 
} 

#m8 { 
    animation-delay:3.25s; 
    -webkit-animation-delay:3.25s 
} 


@keyframes molehill_test { 
    0% { 
     opacity: 0; 
    } 

    50% { 
     opacity: 1; 
    } 

    100% { 
     opacity: 1; 
    } 
} 


@-webkit-keyframes molehill_test { 
    0% { 
     opacity: 0; 
    } 

    50% { 
     opacity: 1; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

전체를 JSFiddle의 코드 :
https://jsfiddle.net/qmgy4133/

Answer 1

jquery의 도움으로 가능합니다.

012 3,516,

$('#trigger').on({ 
 
    mouseenter: function() { 
 
    $('#item').show(); 
 
    $('#item').addClass('flipped'); 
 
    }, 
 
    mouseleave: function() { 
 
    $('#item').removeClass('flipped'); 
 
    } 
 
});

#trigger { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    margin: 0 0 10px 0; 
 
    background: teal; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 

 
#item { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    display: none; 
 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
 
    transform: perspective(350px) rotateX(-90deg); 
 
    -webkit-transform-origin: 50% 0%; 
 
    transform-origin: 50% 0%; 
 
    animation: flipperUp 0.7s; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation: flipperUp 0.7s; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 

 
#item.flipped { 
 
    animation: flipper 0.7s; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation: flipper 0.7s; 
 
    -webkit-animation-fill-mode: forwards; 
 
} 
 

 
@keyframes flipper { 
 
    0% { 
 
    transform: perspective(350px) rotateX(-90deg); 
 
    } 
 
    33% { 
 
    transform: perspective(350px) rotateX(0deg); 
 
    } 
 
    66% { 
 
    transform: perspective(350px) rotateX(10deg); 
 
    } 
 
    100% { 
 
    transform: perspective(350px) rotateX(0deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes flipper { 
 
    0% { 
 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
 
    } 
 
    33% { 
 
    -webkit-transform: perspective(350px) rotateX(0deg); 
 
    } 
 
    66% { 
 
    -webkit-transform: perspective(350px) rotateX(10deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: perspective(350px) rotateX(0deg); 
 
    } 
 
} 
 

 
@keyframes flipperUp { 
 
    0% { 
 
    transform: perspective(350px) rotateX(0deg); 
 
    } 
 
    33% { 
 
    transform: perspective(350px) rotateX(10deg); 
 
    } 
 
    66% { 
 
    transform: perspective(350px) rotateX(0deg); 
 
    } 
 
    100% { 
 
    transform: perspective(350px) rotateX(-90deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes flipperUp { 
 
    0% { 
 
    -webkit-transform: perspective(350px) rotateX(0deg); 
 
    } 
 
    33% { 
 
    -webkit-transform: perspective(350px) rotateX(10deg); 
 
    } 
 
    66% { 
 
    -webkit-transform: perspective(350px) rotateX(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='trigger'>Hover Me</div> 
 
<div id='item'></div>

이