CODEWITHSUNDEEP
htmlcsssvgcss-animations
Erik Blomqvist
Erik Blomqvist

Reputation: 481

Animate dashed border without adding strokes

I have a desired effect that looks like this:

animated edge borders

As you can see, I want two effects on the box on hover:

  1. Make it grow. Easy. CSS3 transform(scale()).
  2. Make the box on the lower right to grow and end up as a frame. Not that easy.

I started trying it out with a dashed border, but it just added more strokes as it grew. Then I started thinking about doing it with SVG's, but the same thing happened there. Now I'm running out of ideas. Got any ideas?

I need it to be dynamic as well when it comes to color, since the boxes will shift on different pages, so I want to stay away from PNG sprites.

My creative mind has stopped spinning. I'll appreciate every idea that could help achieving my desired result. Cheers!

Upvotes: 2

Views: 207

Answers (2)

web-tiki
web-tiki

Reputation: 103780

The issue is that using the scale transform, the borders on the edges will also be affected by the transform.
If you want to avoid that, you can use a transition on pseudo elements to move them on hover:

div {
  position: relative;
  width: 40%;
  padding: 5% 20% 5% 5%;
  background: #62B55C;
  color: #fff;
}
div:after,div:before,p:after,p:before {
  content: '';
  position: absolute;
  width: 5%; height:5%;
  border-style: solid;
  transition: right .3s ease-in-out, bottom .3s ease-in-out;
}
div:before {
  border-width: 2px 0 0 2px;
  right: 15%; bottom: 15%;
}
div:after {
  border-width: 2px 2px 0 0;
  right: 5%; bottom: 15%;
}
p:before {
  border-width: 0 0 2px 2px;
  right: 15%; bottom: 5%;
}
p:after {
  border-width: 0 2px 2px 0;
  right: 5%; bottom: 5%;
}
div:hover:before { bottom: 90%; right: 90%; }
div:hover:after { right: 5%; bottom: 90%; }
div:hover p:before { bottom: 5%; right: 90%; }
h1 {font-size: 3em;margin: 0;}
<div>
  <h1>A very big title</h1>
  <p>Some text with buffalos: buffalo, buffalo, buffalo and another one, buffalo</p>
</div>

Upvotes: 3

mgraham
mgraham

Reputation: 6207

D3?

Basically use a stroke-dasharray and grow the gap in the dasharray at the same speed as the width/height of the square itself.

http://jsfiddle.net/Q5Jag/1848/

<svg height="500" width="500"><rect x="10" y="10" width="20" height="20"></rect></svg>

d3.select("rect")
    .transition()
  .duration(5000)
  .attr("width", 500)
  .attr("height", 500)
  .style("stroke-dasharray", "8 492") // adds up to 500 (finishing width/height)
 ;


rect {
  stroke: black;
  stroke-width: 1;
  fill: white;
  stroke-dasharray: 8 12; // adds up to 20 (starting width/height)
  stroke-dashoffset: 4;
}

Upvotes: 3

Related Questions