用CSS制作文本的动画

Question

是否可以使用Webkit动画/转换来动画从左到右穿过单词的删除线？据我所知，我只能让它淡入/淡出，而不能让它在删除文本时产生动画效果。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

这很有效。。（我使用了悬停，不确定你希望它触发什么事件）

html:

<p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>​

css：

span.line_wrap {
    position:relative;
    display:inline-block;        
}
span.line {
    display:inline-block;
    position:absolute;
    left:0;
    top:50%;
    width:0;
    border-top:1px solid grey;
    -webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
    width:100%;    
}​

小提琴：http://jsfiddle.net/bendog/LXKJU/

编辑：这实际上只是为了说明是可能的。。。尽管如此，还是做出了可怕的加价。我不建议你使用它…

编辑2:或使用Javascript触发：http://jsfiddle.net/bendog/Kdd7K/