CODEWITHSUNDEEP
cssanimation
user3886632
user3886632

Reputation: 87

Animating bar graphs in CSS

I want to achieve an animated bar graph similar to the one seen on the header of http://www.chartjs.org/

It is a visual animation of just a div, so its not pulling any raw data.

I've put together some CSS animation code, but this code increases the div's height from the bottom rather than the top. Could someone help sort this out so it animates like a normal graph, increasing upwards in height, not downwards in CSS2 / CSS3?

<!DOCTYPE html>
<html>
<head>
<style> 


.div0 {
    background-color: blue;
    width: auto;
    height: auto;
    margin-left: 200px;
}

.div1 {  
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: blue;
    margin:auto;
    vertical-align: middle;
    position: relative;
    float: left;
    -webkit-animation: myfirst 2s infinite ; /* Chrome, Safari, Opera */
    animation: myfirst 2s infinite;
    -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
    transition-timing-function: ease-in-out;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes 

myfirst {
    from, 15%  {background:red; height:120px}
    26%, 42%  {background:red; height:210px} 
    42%, 75%  {background:red; height:190px}
    75%, 100% {background:red; height:120px}
    }

</style>
</head>
<body>
<div class = "div0">
<div class = "div1"></div>
</div>
</body>
</html>

Upvotes: 1

Views: 3768

Answers (2)

user3880179
user3880179

Reputation:

Remove position: relative; from your .div1 and add bottom to the class.

.div1 {  
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: blue;
    margin:auto;
    vertical-align: middle;

    /***** edits *****/
    /*position: relative;*/
    bottom: 200px;


    float: left;
    -webkit-animation: myfirst 2s infinite ; /* Chrome, Safari, Opera */
    animation: myfirst 2s infinite;
    -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
    transition-timing-function: ease-in-out;
}

Why are you using position twice anyways?

Update : jsFiddle

Upvotes: 2

webketje
webketje

Reputation: 11006

In addition to modifying the height property, you can adjust the margin-top property, or the top positioning property. Suppose for example that the max. height of your bar is 200px, then for every frame your bar's height + margin-top should be = the max. height, like this:

myfirst {
    from, 15%  {background:red; margin-top: 20px; height: 180px;} /* = 200 */
    26%, 42%  {background:red; margin-top: 190px;height: 10px;}   /* = 200 */
    42%, 75%  {background:red; margin-top: 170px;height: 30px;}   /* = 200 */
    75%, 100% {background:red; margin-top: 20px;height: 180px;}   /* = 200 */
    }

Demo: http://jsbin.com/xicab/1/edit

Upvotes: 1

Related Questions