CSS淡入淡出过渡，是否可能仅使容器褪色而使子元素不透明度为1？

Question

i have an issue, i am doing some CSS transitions that look a lot like http://jsfiddle.net/1ummhm0t/

The issue is that the text within the container lags, is it possible to have the text opacity 1 as soon as the animation is triggered, and only doing the transition on the container element?

If so, what would i have to do to achieve this?

HTML:

<div>
    <div class="container">
        <a href="#">abc</a>
    </div>
<div>

CSS:

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

div {
 background-color: green;   
}

.container {
    opacity:0;
    visibility:hidden:
    display: none;
    background: gray;
}

a {
    color: white;
}

div:hover .container {
    opacity:1;
    visibility:visible;
    display:block;
    -webkit-animation: fadeIn 0.2s;
    animation: fadeIn 0.2s;
}

Answer 1

I think you just need to animate the background-color via the use of transition and not animation : http://jsfiddle.net/tekwxs07/ .

HTML:

<div class="container">
    <a href="#">abc</a>
</div>

CSS:

.container {
    background-color: rgba(60, 60, 60, 0.5);
    transition: background-color linear 0.5s;
}

.container a {
    color: #fff;
    text-decoration: none;
}

.container:hover {
    background-color: green;
}

Answer 2

http://jsfiddle.net/f2059cg5/

Is this what you need? You should use background: rgba instead of opacity for the animation.

@-webkit-keyframes fadeIn {
  from {
    background: rgba(128,128,128,0);
  }

  to {
    background: rgba(128,128,128,1);
  }
}

@keyframes fadeIn {
  from {
    background: rgba(128,128,128,0);
  }

  to {
    background: rgba(128,128,128,1);
  }
}

div {
 background-color: green;   
}

.container {
    opacity: 0;
    visibility: hidden:
    display: none;
    background: gray;
}

div:hover .container {
    opacity: 1;
    visibility: visible;
    display: block;
    -webkit-animation: fadeIn 0.2s;
    animation: fadeIn 0.2s;
}

a {
    visibility: hidden;
    color: white;
}

div:hover a {
    visibility: visible;
}