Having trouble implementing a Fill animation that goes from the bottom to the top of the box .box-inner-1
. The CSS Rotate property seems to be malfunctioning!
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>