2

I am trying to accomplish the effect from this answer but without the text: Expand bottom border on hover

And know this can be accomplished by growing the entire div from the center as with here: http://jsfiddle.net/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)

I have created my line here: 

.line {
    background: white;
    width: 300px;
    top: 10%;
    height: 3.2px;
    margin:auto;
    position: relative;
}

And need to have the line grow from the center on page load. How can I do this?

Community
  • 1
  • 1
blue
  • 7,175
  • 16
  • 81
  • 179
  • _"but without the text"_ What do you mean by "without the text"? – guest271314 May 16 '16 at 04:15
  • If I tried to mimic the effect above I would use text-decoration to create the line, however I just have a div (no text) so I cannot use text-decoration. I need to understand how to grow a div only in width from center – blue May 16 '16 at 04:16

4 Answers4

5

You can use css animation with animation-fill-mode set to forwards, setting @keyframes width from 0% to n%, left from 50% to 5%

body {
  width:100%;
}

div {
  display:block;
  position:absolute;
  top:45%;
  left:50%;
  border-bottom:4px solid red;
  width:0%;
  text-align:center;
  animation: line 2s linear forwards;
}

@keyframes line {
  from {
    left:50%;
    width:0%;
  }
  to {
    left:5%;
    width:90%;
  }
}
<div></div>
guest271314
  • 1
  • 15
  • 104
  • 177
1

   @keyframes line_animation {
from {
 width: 0%;
}
to {
 width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear; 
}
Like this

<hr class="line" />
sree
  • 3,113
  • 2
  • 18
  • 13
v7d8dpo4
  • 1,399
  • 8
  • 9
0

i have utilised display grid and SCSS to configure an authentic border animation

.top-border {
  grid-area: tb;
  // background: green;
  border-bottom: $border-config;
  width: 0%;
  animation: horizontal-border-animation $animation-duration / 2 forwards;
  animation-delay: $animation-delay;
}

.bottom-border {
  grid-area: bb;
  //to prevent being visible since it is going to be delayed
  width: 0%;
  // background: yellow;
  border-top: $border-config;
  animation: horizontal-border-animation $animation-duration / 2 forwards;
  // because both right and bottom will start animating after top and left + the intitial delay
  animation-delay: $animation-duration / 2 + $animation-delay;
}



  @keyframes expand-border-width {
  from {
    width:0%;
  }
  to {
    width:100%;
  }
}

check my sample to gain an explicit clarification

https://codepen.io/ino0r/pen/eYEgvrZ

PicNer
  • 11
  • 3
0

You don't need keyframes for this if you're just transitioning the effect.

<div class="line"></div>

.line {
  width: 0%;
  height: 1px;
  position: absolute;
  left: 50%;
  background: #f00;
  transition: all 1s;
}

.line:hover {
  width: 100%;
  left: 0%;
}
carlossantana
  • 1