Question

我希望获得一个类似于http://www.chartjs.org/标题上的动画条形图

这是一个只有div的视觉动画，因此它不会提取任何原始数据。

我已经整理了一些CSS动画代码，但是这段代码从底部而不是顶部增加了div的高度。有人可以帮忙解决这个问题，以便它像普通图形一样动画，向上增加高度，而不是向下增加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>

Answer 1

除了修改height属性外，您还可以调整margin-top属性或top定位属性。例如，假设最大值。您的栏的高度为200px，然后对于每个框架，您的栏height + margin-top应为=最大值。身高，像这样：

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 */
    }

演示：http://jsbin.com/xicab/1/edit

Answer 2

从position: relative;移除.div1，然后将bottom添加到班级。

.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;
}

为什么你两次使用position？

更新： jsFiddle

CSS中的动画条形图

2 个答案: