首页 文章

CSS3动画和悬停过渡

提问于
浏览 次
2

我在执行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％一样） . 我确定这不是问题的原因 .

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

css css3 animation transitions

1 回答

  • 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>
    回复于

相关问题