Html Division border animation

Question

I have been learning css & jquery.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
 border-style:solid;
 border-color:red;
 height: 80px;
 width: 180px;
}
</style>
</head>

<body>
<div id="box">Demo Box</div>
</body>
</html>

what i am trying to achieve is the border color should appear from left top and flow to create a box border around the division. it seems impossible just want to know expert guidance if this could be done.

*Edit MobyD thanks " like a tron bike "

it's not very clear what you're asking for. what do you mean by "flow"? — David Hedlund, Jun 21 '12 at 12:17
by 'flow' you mean gradient? http://stackoverflow.com/questions/2717127/css3-gradient-borders — VDP, Jun 21 '12 at 12:20
I think he means he wants it to go around the div like a tron car. — Will, Jun 21 '12 at 12:21
You want to animate creating a border from lop-left to top-right, to bottom-right, etc until you end at top-left again and the border is complete? That is very hard to do... You could add lots of small elements around the demo box and change their background one by one to fake this animation... (although I would not recommend this) — Veger, Jun 21 '12 at 12:22
@DavidHedlund first learn how to post question:- http://stackoverflow.com/faq — Javascript Coder, Jun 21 '12 at 12:23

score 3 · Accepted Answer · answered Jun 21 '12 at 12:49

3

Assuming you want an animation around the box, it could be arranged by animating a sequence of lines, each animation triggering the next, as it finishes.

addLine1();
line1.animate({ width: width-of-box }, duration, function() {
   addLine2();
   line2.animate({ height: height-of-box }, duration, ... );
});

Each line would have to be positioned at its appropriate corner.

Demo

A neater recursive solution could probably be built, but it's something along these lines that you'd have to go with. The border property itself cannot be animated in this manner.

answered Jun 21 '12 at 12:49

David Hedlund

128,221
31
203
222

Works great! Can this animation be looped? I have a working demo here: http://tron.syntheticmedia.net – Paul Jan 17 '13 at 07:30
@Paul: [Quick fix](http://jsfiddle.net/ZXEB3/). Added color parameter and a callback upon completing the entire animation, so that the animation could be successively called for two different colors. Could be neater, could definitely clean up after itself. If that's the kind of animation you want. If you just want it to reset and start over, you could simply put the entire thing in a function, and make sure you call `$('.line').remove()` at the top. – David Hedlund Jan 17 '13 at 09:54
@DavidHedlund Cool! That's a good option as well. I'll try your advice on looping. I'm a bit confused though. Put the entire Javascript in a function and then call $('.line').remove() at the top? – Paul Jan 19 '13 at 04:42

score -1 · Answer 2 · answered Jun 21 '12 at 12:26

-1

Assuming you want a gradient border or what do you mean by flow?

Yes it can be done.

Example 2px gradient border:

Simply create a div positioned relative which has a gradient background in your colors Then create a child div positioned absolutely in there with a widht and height slightly smaller and you're ready.

see http://jsfiddle.net/njL3H/

answered Jun 21 '12 at 12:26

Tschallacka

27,901
14
88
133

He wants the border to animate around the div like a tron car. Not that the border would be gradient – Madara's Ghost Jun 21 '12 at 12:28

Html Division border animation

2 Answers2