CODEWITHSUNDEEP
htmlcssanimationtext-decorations
Katrine Mira Arndt Lind
Katrine Mira Arndt Lind

Reputation: 153

Animated CSS Text Underline

I have created this animated underline, but the bottom seems to sit still whilst everything else moves - making it look "laggy"

I created a codepen to illustrate the issue. Do you have any idea why is this happening?

Codepen for illustration

<!DOCTYPE html>
<html>
<body>

<span class="divider-body">
<div class="divider-wave" data-text="dividerdivider"></div>
</span>

</body>
</html>


<style type="text/css">
.divider-body {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0;
    padding: 0;
}


.divider-wave {
    width: 30%;
    height: 10%;
    background: white;
    overflow: hidden;
}

.divider-wave:before {
content: attr(data-text);
position: relative;
top: -42px;
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: underline;
animation: animate 0.5s linear infinite;
}

@keyframes animate 
{
0%
{
    left: 0;
}
100% 
{
    left: -30px;
}
}
</style>

Upvotes: 2

Views: 1532

Answers (3)

Barthy
Barthy

Reputation: 3231

To fix the line issue (without regard to actual browser support), try to use the text-decoration-line: line-through; property and value. I changed the positioning for demonstration purpose.

.divider-body {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
  padding: 0;
  position: relative;
}

.divider-wave {
  width: 30%;
  height: 10%;
  background: white;
  overflow: hidden;
}

.divider-wave:before {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 4em;
  text-decoration-style: wavy;
  text-decoration-color: #607d8b;
  text-decoration-line: line-through;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0% {
    left: 0;
  }
  100% {
    left: -30px;
  }
}
<div class="divider-body">
  <span class="divider-wave" data-text="dividerdivider" />
</div>

I would also suggest swapping the span and div, since a span can only contain phrasing content, as described here. See a list of content categories here.

Upvotes: 2

toeffe3
toeffe3

Reputation: 83

A short inspect shows that the line is moved back, which causes the problem. This happens on the left side as well, but by moving the line out of the container, it is no longer visible. The solution is simple; the width of the container should be the length of the line minus the moving distance of the line.

width: 1130px;

Visual: https://codepen.io/Toeffe3/pen/MWYqJyz

enter image description here

Upvotes: 0

Jack Munton
Jack Munton

Reputation: 11

The text-decoration-style: wavy; doesn't have great support: https://caniuse.com/#search=text%20decoration%20style%20wavy

I'd suggest doing this as a background image with background-repeat: repeat; and animate the background-position property.

Backgrounds will animate a lot smoother.

Upvotes: 0

Related Questions