具有不同效果的CSS動畫：懸停和：主動？

編輯演示是在這裏：http://3.cnxical.appspot.com 具有不同效果的CSS動畫：懸停和：主動？

上懸停的text-shadow性質的變化，並與animation-fill-mode設置forwards的狀態持續。

以下情況的動畫：active狀態不起作用，單擊標題時沒有任何反應。

預期的行爲是標題應該消失，因爲text-shadow屬性設置爲（並且這兩者均已嘗試）none或0 0 1px transparent。設置text-shadow爲：活動也嘗試沒有動畫，它不起作用。

如何才能實現正確的行爲？

的代碼是：

  #title { 
       position:absolute; 
       cursor:pointer; 
       text-align:center; 
       top:15%; 
       left:50%; 
       -webkit-transform:translate(-50%,-50%); 
       color:transparent; 
       text-shadow:0 0 10px lime; 
       font-size:5vmin; 
       font-weight:bold; 
       font-family:"Courier New",Courier,monospace; 
       -webkit-animation: push_title_focus 0.3s; 
      } 
      #title:active { 
       -webkit-user-select:none; 
       -webkit-animation: vanish_title 0.3s; 
      } 
      #title:hover { 
       -webkit-animation: pull_title_focus 0.3s; 
       -webkit-animation-fill-mode: forwards; 
      } 
      @-webkit-keyframes pull_title_focus { 
       from { text-shadow: 0 0 10px lime; } 
       to { text-shadow: 0 0 1px lime; } 
      } 
      @-webkit-keyframes push_title_focus { 
       from { text-shadow: 0 0 1px lime; } 
       to { text-shadow: 0 0 10px lime; } 
      } 
      @-webkit-keyframes vanish_title { 
       from { text-shadow: 0 0 1px lime; } 
       to { text-shadow: none !important; } 
      }

來源

2013-12-19 Cris

不應該是#title：專注於標題被點擊的時候嗎？ –

我一直認爲焦點是標籤焦點，只是點擊時的副作用。主動是爲了點擊。你怎麼看？ – Cris

我想我錯了 - 只是在小提琴中試過，它沒有奏效。但是，您現在有正確的答案：o） –

當你按下鼠標按鈕激活鏈接，鼠標仍然指向它，所以它仍在徘徊。

#title:hover和#title:active同樣具體，最後定義懸停規則。

任何在兩個規則集中都指定了屬性的規則將被:hover規則（包括-webkit-animation）覆蓋。

將您的規則集重新排序，以便:hover規則出現規則:active規則。

來源

2013-12-19 15:18:06 Quentin

太棒了！它的工作原理，謝謝。接受。然而，懸停只是一個觸發事件，觸發動畫，這不是更正確的，所以對於CSS來說，元素還沒有被徘徊。在懸停觸發動畫之後，狀態將保持不變，因爲填充模式是向前的。你怎麼看？ – Cris

編號「被徘徊」意味着「鼠標指向它」。 – Quentin

好了，對於沒有填充模式的WebKit動畫，動畫結束狀態不會持續，表明鼠標懸停時存在單個事件。你怎麼看？ – Cris

具有不同效果的CSS動畫：懸停和：主動？

回答

相關問題