Question

Is it possible to use Webkit animations/transitions to animate a strikethrough line going through a word from left to right? As far as I can tell, I can only make it fade in/out, not animate it striking the text out.

Any help would be appreciated. Thanks.

Answer 1

This works.. (I used hover, not sure what event you want it to trigger)

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%;    
}​

fiddle:
http://jsfiddle.net/bendog/LXKJU/

EDIT: This is really just to illustrate it’s possible… makes horrible markup though. I wouldn’t advise you to use it…

EDIT 2: Or triggered with Javascript: http://jsfiddle.net/bendog/Kdd7K/