使用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/