懸停CSS動畫

Question

我試圖將元素懸停在某個區域外時使用CSS進行動畫處理。 （我不熟悉如何在javascript中執行此操作）

我已經使用懸停偽元素和關鍵幀動畫完成了懸停動畫。 我正在嘗試在：hover上設置不透明度的動畫並懸停。

我已經可以：hover動畫了，但是我想給懸浮動畫設置動畫。 有沒有辦法用CSS3做到這一點？ 我嘗試了幾件事，但是沒有運氣。

HTML：

<a href="#" class="post-header">    
  <h2 class="post-title">Header 
    <em>- Sub Header -</em>
  </h2>         
</a>

CSS：

a.post-header {
background: rgba(17,17,17,0.35);
bottom: 0;
left: 0;
right: 0;
color: #000000;
padding-left: 100px;
padding-right: 100px;
}

/*Fading out*/
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

@-moz-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

h2.post-title em{
    display: none;
    -webkit-animation: fadeout 1.2s ease-in-out;
    -moz-animation: fadeout 1.2s ease-in-out;
    animation: fadeout 1.2s ease-in-out;
}

/*Fading in*/
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

a.post-header:hover em {
    display: inline-block;
    -webkit-animation: fadein 1.2s ease-in-out;
    -moz-animation: fadein 1.2s ease-in-out;
    animation: fadein 1.2s ease-in-out;
}

見下面的小提琴

的jsfiddle

謝謝！

Answer 1

是。 使用CSS Transitions而不是動畫。

然后，您可以將其設置如下：

h2.post-title em{
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 0;
}

a.post-header:hover em {
    opacity: 1;
}