Question

我正在尝试创建动画，我在悬停时将图像从默认图像更改为悬停图像。

我正在使用CSS3动画和关键帧属性，

CSS

.fader img {
  transition: all 1s;
}
.fader img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.fader:hover img:first-child {
  animation: toggle 2s infinite alternate 2s;
}
.fader:hover img:last-child {
  opacity: 1;
  animation: toggle 2s infinite alternate;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML

<div class="fader">
  <img src="http://placehold.it/200x200/000000" />
  <img src="http://placehold.it/200x200/FFFFFF" />
</div>

我为同一个

创建了fiddle

这很好，我需要做一些改变。

当一个图像变为下一个图像时，会留下最后一个图像的印象。我正在寻找没有最后一个足迹的过渡。

正如fiddle中给出的那样，在黑色图像出现之前，白色图像逐渐消失，然后黑色出现，同样发生在黑色到白色之间。我希望改变而不淡出效果。

我试过了

animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out

但这不起作用，

我也减少了延迟时间

animation-delay: .5s

但仍然无效。任何想法？

悬停时需要减少动画过渡效果

0 个答案: