鼠標懸停後反向不透明動畫

Question

我想知道是否有可能在沒有使用JavaScript（這是我正在處理的項目的要求）懸停後在鼠標上反轉一個關鍵幀動畫。我嘗試過動畫方向：替代;和動畫方向：在原始.molehill選擇器和.molehill：hover> img選擇器上反轉，沒有任何運氣。查看JSFiddle獲取當前狀態，但本質上來說，這個鼴鼠在盤旋的時候非常活躍。當您移開鼠標，他消失了，但我寧願有動畫反向，所以它看起來像他慢慢地要回去

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

$('#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>

這僅僅是例子