Question

我在执行CSS3过渡和动画时没有遇到任何问题，但是我发现在没有一些故障的情况下将它们组合起来很麻烦。

我有一个链接列表。当用户悬停在一个上面时，它应该发光（使用文本阴影），但是慢慢地进出脉冲。但是，悬停和离开链接应该会在发光之间产生轻微的过渡。我似乎无法让动画顺利结束。由于动画以“发光”开始，这很好，但是当用户离开链接时，它将恢复为ON状态，然后转换为OFF。如果动画在离开时恰好已经完全打开，这看起来很好，但是如果发光很低，它将首先完全闪烁然后熄灭。

我知道需要使用不同的供应商前缀，例如我将使用webkit版本：

li {
  text-shadow: 0 0 2px rgba(255,255,255,0);
  -webkit-transition: 0.5s;
}

li:hover {
  text-shadow: 0 0 2px rgba(255,255,255,1);
  -webkit-animation: blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink { 
    0% { text-shadow: 0 0 2px rgba(255,255,255,0) }
    100% { text-shadow: 0 0 2px rgba(255,255,255,1) }
}

仅供参考，注意我只使用0％和100％，但使用“alternate”方向参数设置，产生反向循环（就像我设置0％50％和100％一样）。我确信这不是问题的原因。

即使我设置了过渡时间，它也只是在链接离开时立即“关闭”动画，没有过渡，即使我已设置过渡时间。

Answer 1

不要使用动画只需使用悬停和转换

＆＃13;

body{
  background:#0077aa;
  }
li {
  font-size:3em;
  -webkit-text-shadow: 0 0 2px rgba(255,255,255,0);
  text-shadow: 0 0 2px rgba(255,255,255,0);
  transition:all 0.5s ease-out;
  -webkit-transition:all 0.5s ease-out;
}

li:hover {
  text-shadow: 0 0 2px rgba(255,255,255,1);
  -webkit-text-shadow: 0 0 2px rgba(255,255,255,1);
}

＆＃13;

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  </ul>

＆＃13;

CSS3动画和悬停过渡

1 个答案: