CODEWITHSUNDEEP
htmlcsscss-animationskeyframe
Satyajit
Satyajit

Reputation: 21

animate border bottom length from 0 to 100

i need to animate the border bottom of the div using keyframe animation without using :before or :after or modifying the current html structure

div{
    padding:3px 6px;
    display:inline-block;
    position:relative;
    border-bottom: 2px solid black;
}
<div><h1>Lorem Ipsum</h1></div>

Upvotes: 2

Views: 2533

Answers (2)

Temani Afif
Temani Afif

Reputation: 272589

Use gradient:

div.box {
  display: inline-block;
  background: linear-gradient(#000 0 0) bottom/0% 2px no-repeat;
  transition: 1s all;
}

div.box:hover {
  background-size: 100% 2px;
}
<div class="box">
  <h1>Lorem Ipsum</h1>
</div>

Upvotes: 3

Gerard
Gerard

Reputation: 15786

You can simulate it like below. Hope that helps.

.container {
  padding: 3px 6px;
  display: inline-flex;
  flex-direction: column;
}

.underline {
  height: 2px;
  max-width: 0%;
  background-color: black;
  animation: drawBorder 2s ease forwards;
}

@keyframes drawBorder {
  from {
    max-width: 0%;
  }
  to {
    max-width: 100%;
  }
}
<div class="container">
  <h1>Lorem Ipsum</h1>
  <div class="underline"></div>
</div>

Upvotes: 2

Related Questions