CSS3动画和悬停过渡

时间:2014-12-11 05:37:59

标签: css css3 animation transitions

我在执行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%一样)。我确信这不是问题的原因。

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

1 个答案:

答案 0 :(得分:0)

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



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

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  </ul>
&#13;
&#13;
&#13;