悬停CSS动画

Question

I'm trying to get an element to animate using CSS when hovering out of an area. (I'm not familiar with how to do this in javascript)

I've done the hover animation using the hover pseudo element and keyframe animations. I'm trying to animate opacity on :hover and hover out.

I've got the :hover animation ok, but I want the animate the hover out effect. Is there a way to do this with CSS3? I've tried a few things, but no luck.

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;
}

See the fiddle below

jsfiddle

Thanks!

Answer 1

Yes. Use CSS Transitions instead of animations.

Then you can set it as follows:

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

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