CSS3动画和悬停转换

我没有任何困难执行CSS3转换和动画，但我发现将它们组合在一起时没有一些小故障。CSS3动画和悬停转换

我有一个链接列表。当用户悬停在一个，它应该发光（使用文字 - 阴影），但有点缓慢脉冲进出。但是徘徊和离开链接应该会在光辉中有轻微的转变。我似乎无法让动画顺利结束。由于动画以“发光”开始，这很好，但是当用户离开链接时，它会恢复到开启状态，然后转换到关闭状态。如果动画在离开时恰好处于完全状态，这看起来很好，但如果光线不足，它会首先闪烁，然后熄灭。

我所知道的需要使用不同的供应商前缀，对于例如我就使用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％，但与“替代”方向参数设置，这产生了一个反向循环（相同，如果我设置0％50％和100％）。我相信这不是问题的原因。

即使我已经设置了转换时间，它只是在链接离开时立即“关闭”动画，不会转换出来。

来源

2014-12-11 Eric Barker

你可以把你的代码放到一个的jsfiddle或codepen？ – Todd 2014-12-11 05:40:26

不使用动画只是使用悬停和过渡

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>

来源

2014-12-11 07:55:39 Suresh

CSS3动画和悬停转换

回答

相关问题