DIR : /home/kozerus/public_html/jkwii/js/jsdoit/humanarrow_css/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/humanarrow_css

body, div, p {
    margin:  0;
    padding: 0;
    text-align: center;
}
#arrow {
	position:relative;
	width:200px;
	height:64px;
	margin:160px auto;
}
.part {
	float: left;
	margin-right: 8px;
	-webkit-border-radius: 4px;

	-webkit-animation-name: inpact;
	-webkit-animation-duration:10s;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-iteration-count:infinite;
}

#arrow > div > div {
	background: #080;
	width:8px;
	height:50px;

	-webkit-animation-duration:1s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
}
#arrow > div > div.head {
	-webkit-border-radius: 8px;
	width: 16px;
	height: 16px;
	margin-left: -4px;
}
#arrow > div > div.upper {
	-webkit-border-radius: 4px 4px 0 0;
	-webkit-transform-origin: top left;

	-webkit-animation-name: move_upper;
}
#arrow > div > div.lower {
/*	background: #f00 !important;*/

	-webkit-border-radius: 0 0 4px 4px;
	-webkit-transform-origin: bottom left;
	-webkit-animation-name: move_lower;

	margin-top: -18px;
}
@-webkit-keyframes move_upper{
  0%{	-webkit-transform: matrix(1, 0, 0.0, 1, 0, 0);  }
 50%{	-webkit-transform: matrix(1, 0, 0.5, 1, 0, 0);  }
100%{	-webkit-transform: matrix(1, 0, 0.0, 1, 0, 0);  }
}
@-webkit-keyframes move_lower{
  0%{	-webkit-transform: matrix(1, 0, -0.0, 1, 0, 0);  }
 50%{	-webkit-transform: matrix(1, 0, -0.5, 1, 0, 0);  }
100%{	-webkit-transform: matrix(1, 0, -0.0, 1, 0, 0);  }
}


#p0 { -webkit-animation-delay:0s; }
#p1 { -webkit-animation-delay:1s; }
#p2 { -webkit-animation-delay:2s; }
#p3 { -webkit-animation-delay:3s; }
#p4 { -webkit-animation-delay:4s; }
#p5 { -webkit-animation-delay:5s; }
#p6 { -webkit-animation-delay:6s; }
#p7 { -webkit-animation-delay:7s; }
#p8 { -webkit-animation-delay:8s; }
#p9 { -webkit-animation-delay:9s; }

@-webkit-keyframes inpact{
  0%{	-webkit-transform: translatey(0px); }
 5%{	-webkit-transform: translatey(20px);  }
 12%{	-webkit-transform: translatey(-50px);  }
 20%{	-webkit-transform: translatey(0px);  }
}