I am working on animating a grey bar from top to bottom, but now I need it to animate from bottom to top instead. You can view my current code here: http://jsfiddle.net/hrcu9e6b/3/
<div class="review-type-wrapper-v">
<div class="review-type-inner" style="height:82%">
<div></div>
</div>
</div>
@-webkit-keyframes lineV {
from {
height: 0;
}
to {
height: 100%;
}
}
@keyframes lineV {
from {
height: 0;
}
to {
height: 100%;
}
}
.review-type-wrapper-v,
.review-type-wrapper-h{
border-radius:3px;
border:1px solid $rating-background-dark;
overflow: hidden;
.review-type-inner{
position: absolute;
> div{
background-color: $rating-background-dark;
//position: absolute;
left: 0;
height: 100%;
//width:100%;
}
}
}
.review-type-wrapper-v{
position: relative;
width: 14px;
height: 60px;
.review-type-inner{
bottom: 0;
width: 100%;
height: 100%;
> div{
-webkit-animation: lineV 3s linear;
animation: lineV 3s linear;
}
}
}