CODEWITHSUNDEEP
htmlcsscss-animations
Andy Kaufman
Andy Kaufman

Reputation: 781

Is it possible to animate a CSS line-through text-decoration?

I am trying to animate with CSS the a line through on a bit of text, but it's not actually animating, just going from hidden to displayed. Can anyone advise if what I'm trying is actually possible? If not, is there another way to achieve this? HTML:

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

CSS:

@keyframes strike{
                from{text-decoration: none;}
                to{text-decoration: line-through;}
            }
 .strike{  
    -webkit-animation-name: strike; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: strike;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; 
    }

Upvotes: 11

Views: 25776

Answers (6)

Hamzat Oluwabori
Hamzat Oluwabori

Reputation: 31

I've been able to find a way around it that also work for multiple lines, I mainly got this info from Kevin Powell's code pen:https://codepen.io/kevinpowell/pen/MWYwgOz. Here's my solution

.fancy-link {
  text-decoration: none;
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 0% 1px;
  transition: background-size 500ms ease-in-out;

  /* extra styling   */
/*   font-weight: var(--fw-bold); */
}

.fancy-link:hover {
  background-size: 100% 1px;
  color: inherit;
}
<div class="content">
  <p> <a class="fancy-link" href="#">sit amet consectetur adipisicing elit. Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae quo iure quaerat voluptate placeat. A eius cum, rem aspernatur ipsa illum. Commodi ullam cupiditate aliquid ducimus consequatur.</a></p>
</div>

Also, for accessibility issues, you can add

.fancy-link:hover{
  /*...former code*/
  text-decoration: line-through;
  text-decoration-color:transparent;
}

Note: the "fancy-link" class isn't on the paragraph tag but on the anchor tag.

Upvotes: 0

vsync
vsync

Reputation: 130800

It's very elegant, IMO, to use linear-gradient as background, and paint line which is the same color as the text (currentColor).

This solution is very flexible, opens up the door to many interesting effects and is also much less code than a pseudo-element solution.

PS: It also supports multi-line texts

From my CodePen:

span {
  --thickness: .1em;
  --strike: 0;
  
  background: linear-gradient(90deg, transparent, currentColor 0) no-repeat 
              right center / calc(var(--strike) * 100%) var(--thickness);

  transition: background-size .4s ease;
  font: 25px Arial;
  padding: 0 .2em;
}

span:hover {
  --strike: 1; /* "1" means "true" (show the strike line) */
  background-position-x: left;
}
<span contenteditable spellcheck='false'>
  Strike-through animation (hover)
 </span>

Upvotes: 4

Asons
Asons

Reputation: 87313

You can use a pseudo like this

Note (thanks to Phlame), this left-to-right animation won't work if the line to strike breaks in to a second line. For that one need to use yet another pseudo element and some script to position the two properly. Or use some other animation effect, e.g. like the one suggested in Oriol's answer.

@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}
<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Upvotes: 35

ashleedawg
ashleedawg

Reputation: 21657

Here's a variation on the accepted answer, using an image to provide an animated "scribble" strike-through.

html {
  font-family: Helvetica;
  font-size: 24px;
}
.strike { position:relative; }
.strike::after {
  content:' ';
  position:absolute;
  top:50%; left:-3%;
  width:0; height:10px;
  opacity:80%;
  transform:translateY(-50%);
  background:repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKAQMAAAByjsdvAAAABlBMVEUAAADdMzNrjRuKAAAAAXRSTlMAQObYZgAAADdJREFUCNdj+MMABP8ZGCQY/h9g+MHw/AHzDwbGD+w/GBhq6h8wMNj/b2BgkP8HVMMPUsn+gQEAsTkQNRVnI4cAAAAASUVORK5CYII=);
  animation: strike 2s linear .3s 1 forwards;
}
@keyframes strike { to { width: 106%; } }
This thing and <span class="strike">this thing and</span> this thing.

Upvotes: 3

Oriol
Oriol

Reputation: 288700

It depends on how you want to animate it.

Since text-decoration-color is animatable, you can animate it from transparent to auto.

But this property is not widely supported yet.

@keyframes strike {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: auto; }
}
.strike {  
  text-decoration: line-through;
  animation: strike 4s linear;
}
<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Upvotes: 10

AMACB
AMACB

Reputation: 1298

According to W3Schools, the text-decoration property is not animatable.

However, if you use jQuery, you can. (See here)

Upvotes: -2

Related Questions