Question

当我将鼠标悬停在某个区域外时，我正在尝试使用CSS设置动画元素。（我不熟悉如何在javascript中执行此操作）

我使用悬停伪元素和关键帧动画完成了悬停动画。我正在尝试对不透明度进行动画处理：悬停并将鼠标悬停。

我得到了：悬停动画确定，但我希望动画悬停效果。有没有办法用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过渡而不是动画。

然后你可以按如下方式设置：

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

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

CSS动画暂停

1 个答案: