CSS3自定義動畫觸發後：hover

我創建了一系列「窗戶」或「小狗門」，當它們徘徊時，似乎像小狗門一樣推回到「窗口」。CSS3自定義動畫觸發後：hover

我已經能夠創造小狗關門的自然看起來效果。它來回擺動幾次，然後恢復到默認位置。

我的問題是，我還沒有能夠找到一種方法來觸發懸停時發佈懸停。我知道它是一個邏輯問題，因爲我已經看過它的例子here並使用關鍵幀[這裏] [2]。我也知道我可以用javascript來解決這個問題，但我堅持嚴格遵守這個網站的CSS。

更新：

下面是工作示例。 Fiddle

謝謝大雄！

HTML：

<ul class="window"> 
    <li> 
     <figure class="door"> 
      <img src="http://www.ta-sa.org/data/images/laughing_man_big_2.png" alt=""> 
     </figure> 
    </li> 
</ul>

CSS：

* { 
    list-style: none; 



} 
.door { 
    width: 300px; 
    height: 300px; 
    margin: 0; 
    position: relative; 
    perspective:1000px; 
    -webkit-perspective:1000px; 
    /* Safari and Chrome */ 
} 
.door img { 
    background-color: #E8585A; 
    width: 100%; 
    display: block; 
    position: relative; 
    transform-origin: top; 
    -ms-transform-origin: top; 
    /* IE 9 */ 
    -webkit-transform-origin: top; 
    /* Safari and Chrome */ 
    -moz-animation: swing 2s; 
    -webkit-animation: swing 2s; 
    animation: swing 2s; 
    z-index: 10; 
} 

.door:hover img { 
     transform-origin: top; 
    -webkit-transform-origin: top; 
    -webkit-transform: rotateX(-60deg); 
    -webkit-transition: all .2s; 
    background-color: #00a99d; 
    -webkit-animation: swing; 
    /* Safari and Chrome */ 
} 
@-webkit-keyframes swing { 
    0%, 20%, 40%, 60%, 80%, 100% { 
     -webkit-transform-origin: top center; 
    } 
    0% { 
     -webkit-transform: rotateX(-60deg); 
    } 
    20% { 
     -webkit-transform: rotateX(-60deg); 
    } 
    40% { 
     -webkit-transform: rotateX(25deg); 
    } 
    60% { 
     -webkit-transform: rotateX(-20deg); 
    } 
    80% { 
     -webkit-transform: rotateX(5deg); 
    } 
    100% { 
     -webkit-transform: rotateX(0deg); 
    } 
}

來源

2013-07-25 Nick Dumais

當懸停發佈只用'css' – iConnor

這傢伙做到了你不能觸發任何東西。 http://css-tricks.com/examples/DifferentTransitionsOnOff/ –

這是動畫回到它的默認位置，所以是的，你可以嘗試和僞造它，但你不能調用一個「'mouseleave」的自定義動畫''事件'css' – iConnor

尼斯的技術，我不知道徘徊過一個div時，你可以觸發動畫！我擺弄了一下，希望它能夠工作，即使不如預期的那麼順利，但它可能足以朝正確的方向進一步邁進。

這裏的問題是 - 我猜 - 你沒有在懸停狀態（如鏈接中所建議的）聲明動畫，而只是一個轉換。所以我嘗試添加一個過渡的「門」上懸停打開...

.door:hover img { 
    transform-origin: top; 
    transform: rotateX(-60deg); 
    transition: all .2s;

...和動畫時會觸發鼠標移開時：

animation: swing; 
}

希望這fiddle顯示了你需要或至少可以幫助你。無論如何，很高興自己學到了新東西，謝謝。

來源

2013-07-25 01:53:59 Nobita

你有那裏的毛病動畫 – Markasoftware

這是一個正確的方向邁出的巨大的一步。我稍微調整一下就會更新。 –

得到它的工作！這是[小提琴]（http://jsfiddle.net/e4FMm/） –

我在Firefox V22使用:not pseudo-class像這樣的工作：

Working Example

.door img:not(:hover) { 
    transform-origin: top; 
    animation: swing 2s; 
}

這個僞類組合看起來像一個糟糕的黑客，但它的作品。

動畫仍然需要爲-webkit-瀏覽器的一些工作......

來源

2013-07-25 02:33:07 apaul

CSS3自定義動畫觸發後：hover

回答

相關問題