Question

我有一个问题，我正在做一些看起来很像http://jsfiddle.net/1ummhm0t/

的CSS转换

问题是容器内的文本滞后，是否可以在触发动画后立即使用文本不透明度1，并且只对容器元素进行转换？

如果是这样，我需要做些什么来实现这个目标？

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

我认为您只需要通过使用background-color而不是transition：http://jsfiddle.net/tekwxs07/为animation制作动画。

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/

这是你需要的吗？您应该使用background: rgba代替opacity来制作动画。

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

CSS淡入淡出过渡，是否可以让子元素不透明度为1而仅淡化容器？

2 个答案: