Create line built up animation with hexagon with css javascript

Question

I am trying to create a lines built up animation with hexagon element. I have tried the below for getting the hexagon element styling but with that i cant animate the lines in sequence after each other

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}

#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}

#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

<div id="hexagon"></div>

Any ideas how i can achieve this type of animation with css javascript, jquery?

How do you want them animated? Do you want the to just pop in? Fade in? Fly in from the top, bottom, left or right? — Useless Code, Mar 24 '17 at 11:39
Well to animate lines, you would first of all need lines. You don’t have any “lines” here, you have just an element that occupies a certain space. Your best bet for animating individual “lines” is to start by using an SVG as the basis. — CBroe, Mar 24 '17 at 11:39
I need to fadeIn top left line of the hexagon then next and so on so all in sequence @UselessCode — aiddev, Mar 24 '17 at 11:41
I tried to create to seprate each lines and position them with absolute positioning but that is kind of not responsive solution @CBroe — aiddev, Mar 24 '17 at 11:42
In what way do you need it to be responsive? Your initial example just used fixed pixel values everywhere ... Absolute positioning can work quite well with percentage values - but it could be problematic when you need pixel-perfect edges, especially where lines meet. SVG however would have scalability “built-in” already. — CBroe, Mar 24 '17 at 12:06
Yes i need pixel perfect edges. SVG is not working in IE that's why am not using it @CBroe — aiddev, Mar 24 '17 at 12:11
Well then use a library that adds those capabilities ... http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11 — CBroe, Mar 24 '17 at 13:46

Create line built up animation with hexagon with css javascript

0 Answers0